/* The studio's send button (round 6; send.js draws it). A black-glazed disc with a terracotta ring
   and a painter's arrow; the colours are its own, the same in every theme, as a pot's are. Hover or
   focus warms the line to gold; while a message goes the ring turns as a key pattern; then a tick. */
.send-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 50%; color: #d4824a; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #33251b 0%, #17110d 58%, #0c0907 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.send-btn .send-art { display: block; width: 44px; height: 44px; overflow: visible; }
.send-ring { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: 0.85; }
.send-key {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-dasharray: 5.2 2.2 1.4 2.2; opacity: 0;
  transform-box: view-box; transform-origin: 22px 22px;
}
.send-arrow { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s; }
.send-tick { fill: none; stroke: #82c99b; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.2s; }
.send-btn:hover, .send-btn:focus-visible { color: #e3b357; }
.send-btn:focus-visible { outline: 2px solid #e3b357; outline-offset: 3px; }
.send-btn:active:not(:disabled) { transform: scale(0.94); }
.send-btn:disabled { cursor: default; }
.send-btn:disabled:not(.sending):not(.sent) { opacity: 0.42; }
.send-btn.sending .send-ring { opacity: 0; }
.send-btn.sending .send-key { opacity: 1; }
.send-btn.sending .send-arrow { opacity: 0.32; }
.send-btn.sent .send-arrow { opacity: 0; }
.send-btn.sent .send-tick { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .send-btn { transition: transform 0.12s ease, color 0.2s ease; }
  .send-btn.sending .send-key { animation: send-turn 1.6s linear infinite; }
}
@keyframes send-turn { to { transform: rotate(360deg); } }

/* "He is reading" / "He is writing": three dots that rise in turn (still with reduced motion). Shared
   by a crew member's chat on the desk and the visitors' talk. */
.talk-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.talk-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .talk-dots i { animation: talk-dot 1.2s ease-in-out infinite; }
  .talk-dots i:nth-child(2) { animation-delay: 0.15s; }
  .talk-dots i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes talk-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }