/* Real fetched values (Xj7SKBi5DN90wAFzfUvxxC, "send-anime" 350:18275):
   40x40 circle, bg #fa0881 (--background-accent), border 1px solid
   rgba(255,255,255,0.12) (--border-modal-box).

   Hidden state is truly zero-footprint (width/height/margin-left all 0),
   not a visually-invisible-but-still-reserved 2px slot — real Figma data
   (node 195:8911's own message-bar instance, "New message modal 8") shows
   the input field at 318px wide, reaching the container's own right edge,
   with the collapsed send button literally overlapping its last 2px rather
   than sitting in separate reserved space. Zero width/margin here is the
   web-flex equivalent: the input field's flex:1 (chat-thread-screen.css)
   naturally fills 100% of the remaining row when this is 0.

   The visible background is a separate absolutely-positioned inner element
   (.send-button__bg), fixed at its own real 40x40 size and centered on the
   outer box regardless of the outer's own current size — this is what lets
   the bounce (below) and the "send" shrink (further below) both render
   independently of, and even larger than, the space actually reserved in
   the flex row. */
.send-button {
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  /* Real UA `<button>` default padding/border/background — unlike a plain
     div, a bare <button> renders the OS's own beveled control chrome
     (shows as a pale rectangle behind the pink circle) unless explicitly
     stripped. This is now just the layout/hit-target box; .send-button__bg
     supplies all the actual visible fill/border. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Always visible, not just during --sending — the whole point of
     decoupling the bg into its own fixed-size, independently-transformed
     element is so its bounce/shrink can render past the outer's own
     current width/height without being clipped, and without that overflow
     ever affecting this box's own reserved layout space. */
  overflow: visible;
  opacity: 0;
  cursor: default;
  /* width/height are NOT in this transition list (margin-left/opacity are)
     — the send-flourish shrink now drives width/height itself, via the
     .send-button--sending animation below, synced frame-for-frame with the
     bg's own scale-down so the input field's flex:1 grows in real time as
     the button visually shrinks, not just after. This base rule's own
     150ms only covers what's left once that animation ends: the residual
     8px margin-left and the fade, i.e. "continuing expanding once the
     button is no longer visible" — per explicit instruction. (CSS picks a
     transition's duration from the TARGET state's own rule; base is the
     target when --visible is removed, so this is what applies during that
     whole collapse.) Total disappear time is a flat 600ms: 450ms flourish
     (width/height + bg scale + icon fly, all synced) + 150ms residual
     margin/opacity collapse. */
  transition: margin-left 150ms ease-out, opacity 150ms ease-out;
}

.send-button--visible {
  width: 40px;
  height: 40px;
  margin-left: 8px;
  opacity: 1;
  cursor: pointer;
  /* 400ms here (the target state when GROWING in) — same value as before,
     untouched; only the collapse direction (base rule above) changed. */
  transition: width 400ms ease-out, height 400ms ease-out, margin-left 400ms ease-out, opacity 400ms ease-out;
}

/* Fixed at a real 40x40 box, centered on the outer button via left/top:50%
   + translate(-50%,-50%) (recomputed against this element's OWN current
   size every frame, so it stays centered through both the scale bounce
   below and the width/height shrink further down) — never sized as a
   percentage of the outer, so it's fully decoupled from the outer's own
   (deliberately un-bouncy, layout-affecting) width/height transition. */
.send-button__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--border-modal-box);
  border-radius: 100px;
  background-color: var(--background-accent);
  transform: translate(-50%, -50%) scale(0);
  /* The bounce: a "back out" overshoot bezier, popping past 100% scale
     before settling — my own read of "bouncy like a bubble" (no fetched
     easing value was available, see the duration note above). Living on
     `transform` here, not the outer's width/height, means the overshoot
     literally renders bigger than the button's own allocated space and
     bleeds outside it (overflow:visible on the outer, above) with zero
     effect on the input field's width or the row's height — transforms
     never participate in layout. */
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.send-button--visible .send-button__bg {
  transform: translate(-50%, -50%) scale(1);
}

/* Icon offset 2px left of dead-center — real fetched value (Figma's "full"
   state has 4px of right-padding around a centered icon, net effect a 2px
   shift) — carried as the icon's own margin so it's independent of the bg
   element's sizing. */
.send-button__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  pointer-events: none;
}

/* The "send" flourish: the pink bg shrinks to nothing in place (scale only —
   no opacity change on it, no width/height change either now, see below)
   while the icon flies independently to the top-right corner via its own
   transform, untouched by the bg's own animation since it's a separate
   element.
   450ms = 3/4 of the disappear sequence's flat 600ms total (450ms flourish
   + 150ms collapse, see the base .send-button rule above), per explicit
   instruction — was 220ms, then 465ms. No Smart Animate timing was
   available for this step (same empty get_motion_context result as
   before), so both the split and the total are authored, not fetched.
   Scale, not width/height, specifically so the end state (scale(0)) is
   IDENTICAL to .send-button__bg's own base/unclassed rule — when
   finishSending (js/app.js) later removes --sending and --visible together,
   there's no discontinuity to snap across: the bg just keeps transitioning
   on the same `transform` property via its own always-on transition,
   continuing smoothly into the outer box's collapse instead of restarting. */
/* The outer box's own width/height shrink alongside the bg's scale — same
   450ms ease-in, same forwards fill — so the input field's right edge
   (flex:1 in the same row) grows in real time as the button visually gets
   smaller, keeping a constant 8px gap (margin-left, untouched here) to
   whatever's left of the shrinking circle, instead of sitting frozen at
   the full 40px until a separate collapse phase starts. Per explicit
   instruction. */
.send-button--sending {
  animation: send-button-width-shrink 450ms ease-in forwards;
}

.send-button--sending .send-button__bg {
  animation: send-button-bg-shrink 450ms ease-in forwards;
}

.send-button--sending .send-button__icon {
  animation: send-button-icon-fly 450ms ease-in forwards;
}

@keyframes send-button-width-shrink {
  from {
    width: 40px;
    height: 40px;
  }
  to {
    width: 0;
    height: 0;
  }
}

@keyframes send-button-bg-shrink {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(0);
  }
}

@keyframes send-button-icon-fly {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(34px, -34px) scale(0.7);
  }
}