/* The ball (ball/ball.js). Until a button has the .ball class (the script
   didn't load, or hasn't yet), it keeps its old icon and size. */
.ball-svg { display: block; width: 100%; height: 100%; pointer-events: none; }

/* The chat bar's send button: 56 px on phones and computers. It pokes a little
   past the bar's top, bottom and right end while the bar keeps its height (the
   negative margins hand the extra size back). */
.send-btn.ball {
  --ball: 56px; --ball-row: 36px;
  width: var(--ball); height: var(--ball); padding: 0;
  margin: calc((var(--ball-row) - var(--ball)) / 2) -10px calc((var(--ball-row) - var(--ball)) / 2) 0;
  position: relative; z-index: 1; box-shadow: 0 3px 10px rgba(139, 94, 60, 0.22);
}
.send-btn.ball > svg:not(.ball-svg) { display: none; }
/* busy while Pila writes back: it stays brown, and tapping does nothing (the button is disabled) */
.send-btn.ball:disabled, .send-btn.ball:disabled:hover { background: var(--pila-warm); cursor: default; }
@media (max-width: 768px) {
  .send-btn.ball { --ball-row: 38px; }
  /* index.html asks for env(safe-area-inset-bottom, 8px), but a phone browser with no home bar
     reports 0 there, which would leave the bar flush with the screen and clip the ball's bottom.
     Keep at least the 8px it meant; the home-screen app's larger inset still wins. */
  html .input-area { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}