/* The demo's own additions to Chat Computer's screen (chat.css): the two buttons at the right of the message box,
   for using real Claude here (with an API key) and for talking through AirPods. Written by hand, like host.js. */
#demo-tools {
  position: absolute; left: calc(100% + 0.75rem); bottom: 0.45rem;
  display: flex; align-items: center; gap: 0.5rem;
}
#demo-tools button {
  display: flex; align-items: center; gap: 0.4em; margin: 0; padding: 0.3em 0.8em;
  border: 2px solid var(--bubble); border-radius: 999px; background: var(--ground); color: var(--ink);
  font-size: 0.8rem; line-height: 1.4; white-space: nowrap; cursor: pointer;
}
#demo-tools button:hover { border-color: var(--ink); }
#demo-tools button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#demo-tools svg { flex: none; width: 1.15em; height: 1.15em; }
/* Switched on: black, as the screen's one main button is. */
#demo-tools button.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
/* Less room beside the box: one above the other, as high as the box. Less still: just the icons. None: the icons
   go inside the box, before the send arrow. */
#demo-tools.stack {
  flex-direction: column; align-items: stretch; gap: 0.2rem; top: 50%; bottom: auto; transform: translateY(-50%);
}
#demo-tools.stack button { padding: 0.05em 0.75em; font-size: 0.75rem; }
#demo-tools.short .long { display: none; }
#demo-tools.compact .label { display: none; }
#demo-tools.compact button { padding: 0.3em; }
#demo-tools.inside { position: static; flex: none; gap: 0.25rem; align-self: center; transform: none; }
#demo-tools.inside button { padding: 0.15em; border-color: transparent; }
#demo-tools.inside svg { width: 1.3em; height: 1.3em; }
#demo-tools.inside button.on { border-color: var(--ink); }
/* While listening: a dot that pulses, as the bubble of what's being heard has. */
#demo-tools .dot {
  display: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}
#demo-tools button.listening .dot { display: inline-block; }
@media (prefers-reduced-motion: reduce) { #demo-tools .dot { animation: none; } }