.lf-work-sec{position:relative;overflow:hidden;color:var(--ink);padding-top:var(--sp-12);padding-bottom:64px;background:var(--cream)}
.lf-work-cta{margin:var(--sp-12) 0 0;text-align:center}
.lf-work-head{margin-bottom:var(--sp-12)}
.lf-work-head .u-lead{text-wrap:balance}

.lf-work-chat{--wa-teal:#008069;--wa-teal-deep:#075E54;--wa-wall:#EFEAE2;--wa-bubble-green:#D9FDD3;--wa-ink:#111B21;--wa-grey:#667781;
   max-width:var(--container-narrow);margin:0 auto;overflow:hidden;
   border-radius:var(--r-card);box-shadow:var(--sh-rest);

   background-color:var(--wa-wall);
   background-image:radial-gradient(rgba(11,15,30,.06) 1px,transparent 1.5px),radial-gradient(rgba(11,15,30,.06) 1px,transparent 1.5px);
   background-size:28px 28px,28px 28px;background-position:0 0,14px 14px}

.lf-work-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:#fff;color:var(--wa-ink);border-bottom:1px solid var(--hairline)}
.lf-work-back{width:var(--sp-6);height:var(--sp-6);fill:none;stroke:var(--wa-grey);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lf-work-avatar{flex:none;width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--wa-bubble-green);color:var(--wa-teal-deep)}
.lf-work-avatar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lf-work-name{font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-card);color:var(--wa-ink)}
.lf-work-actions{display:flex;gap:var(--sp-4);margin-inline-start:auto}
.lf-work-actions svg{width:var(--sp-6);height:var(--sp-6);fill:none;stroke:var(--wa-teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lf-work-actions svg circle{fill:var(--wa-teal);stroke:none}

.lf-work-pin{padding:var(--sp-4) var(--sp-6);background:#fff;text-align:center;border-bottom:1px solid var(--hairline)}
.lf-work-pin-label{display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1);
   font-size:var(--fs-eyebrow);font-weight:var(--fw-body);line-height:var(--lh-card);color:var(--blue)}
.lf-work-pin-label svg{width:var(--sp-4);height:var(--sp-4);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lf-work-pin-text{margin:0;font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-card);color:var(--wa-ink)}

.lf-work-thread{list-style:none;margin:0;padding:var(--sp-6) var(--sp-4) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-8)}
.lf-work-stage{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-3);padding-top:40px}

.lf-work-day{position:absolute;bottom:100%;margin-bottom:var(--sp-3);inset-inline-start:0;
   display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);
   background:var(--wa-bubble-green);color:var(--wa-teal-deep);box-shadow:var(--sh-chip);
   font-size:var(--fs-eyebrow);font-weight:var(--fw-body);line-height:var(--lh-body);white-space:nowrap}

.lf-work-msg{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:'pic from' 'pic head' 'pic body';
   column-gap:var(--sp-6);row-gap:var(--sp-1);align-items:start;width:100%;max-width:min(100%,72ch);
   padding:var(--sp-3) var(--sp-4) var(--sp-4);margin-inline:auto;
   background:#fff;color:var(--wa-ink);border-radius:var(--r-md);border-start-start-radius:0;box-shadow:var(--sh-chip)}
.lf-work-msg::before{content:'';position:absolute;top:0;right:-8px;width:0;height:0;border-top:10px solid #fff;border-right:8px solid transparent}
.lf-work-from{grid-area:from;font-size:var(--fs-eyebrow);font-weight:var(--fw-body);line-height:var(--lh-card);color:var(--wa-teal)}
.lf-work-h{grid-area:head;margin:0;font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-card);color:var(--wa-ink);text-wrap:balance}
.lf-work-body{grid-area:body;margin-top:var(--sp-2)}
.lf-work-body p{margin:0;font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--wa-ink)}
.lf-work-body p+p{margin-top:var(--sp-3)}

.lf-work-pic{grid-area:pic;width:96px;height:96px;overflow:visible;align-self:start;margin-top:var(--sp-2);
   color:var(--wa-ink);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lf-work-pic *{vector-effect:non-scaling-stroke}
.lf-work-acc{color:var(--blue)}
.lf-work-acc-fill{fill:var(--blue);stroke:none}
.lf-work-rec{fill:var(--red);stroke:none;animation:u-blink 1.6s ease-in-out infinite}
.lf-work-on{fill:var(--green);stroke:none}

.lf-work-typing{position:absolute;top:var(--sp-3);inset-inline-start:var(--sp-4);display:flex;gap:6px;opacity:0;pointer-events:none}
.lf-work-typing i{width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-pill);background:var(--wa-grey)}

.lf-work-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.lf-work-sec.is-in .lf-work-chat{animation:lf-work-panel var(--dur-slow) var(--ease-out) both}
.lf-work-sec.is-in .lf-work-bar{animation:lf-work-drop var(--dur-slow) var(--ease-out) .1s both}
.lf-work-sec.is-in .lf-work-pin{animation:lf-work-drop var(--dur-slow) var(--ease-out) .25s both}
.lf-work-sec.is-in .lf-work-msg{animation:lf-work-in var(--dur-base) var(--ease-out) var(--d) both,
   lf-work-grow .45s var(--ease-out) calc(var(--d) + .7s) both}
.lf-work-sec.is-in .lf-work-typing{animation:lf-work-typing .7s steps(1) var(--d) backwards}
.lf-work-sec.is-in .lf-work-typing i{animation:lf-work-bounce .9s ease-in-out infinite}
.lf-work-sec.is-in .lf-work-typing i:nth-child(2){animation-delay:.15s}
.lf-work-sec.is-in .lf-work-typing i:nth-child(3){animation-delay:.3s}
.lf-work-sec.is-in .lf-work-pic,.lf-work-sec.is-in .lf-work-from,.lf-work-sec.is-in .lf-work-h,.lf-work-sec.is-in .lf-work-body{
   animation:lf-work-content var(--dur-slow) var(--ease-out) calc(var(--d) + .85s) both}
@keyframes lf-work-panel{from{opacity:0;transform:translateY(var(--sp-4))}to{opacity:1;transform:none}}
@keyframes lf-work-drop{from{opacity:0;transform:translateY(calc(-1*var(--sp-2)))}to{opacity:1;transform:none}}
@keyframes lf-work-in{from{opacity:0}to{opacity:1}}

@keyframes lf-work-grow{from{clip-path:inset(0 -8px calc(100% - 44px) calc(100% - 88px) round var(--r-md))}to{clip-path:inset(-48px -8px 0 0 round var(--r-md))}}
@keyframes lf-work-typing{0%{opacity:1}99%{opacity:1}100%{opacity:0}}
@keyframes lf-work-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lf-work-content{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .lf-work-rec,.lf-work-sec.is-in .lf-work-chat,.lf-work-sec.is-in .lf-work-bar,.lf-work-sec.is-in .lf-work-pin,.lf-work-sec.is-in .lf-work-msg,
  .lf-work-sec.is-in .lf-work-typing,.lf-work-sec.is-in .lf-work-typing i,.lf-work-sec.is-in .lf-work-pic,.lf-work-sec.is-in .lf-work-from,
  .lf-work-sec.is-in .lf-work-h,.lf-work-sec.is-in .lf-work-body{animation:none}
}

@media(max-width:700px){
  .lf-work-chat{border-radius:var(--r-md)}
  .lf-work-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .lf-work-actions svg:not(:last-child){display:none}
  .lf-work-back{display:none}
  .lf-work-pin{padding:var(--sp-3) var(--sp-4)}
  .lf-work-thread{padding:var(--sp-4) var(--sp-3) var(--sp-6);gap:var(--sp-6)}
  .lf-work-msg{grid-template-columns:56px minmax(0,1fr);grid-template-areas:'pic from' 'pic head' 'body body';column-gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-4)}
  .lf-work-pic{width:56px;height:56px;margin-top:0}
  .lf-work-body{margin-top:var(--sp-3)}
}