.assistant {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
}

.assistant-btn {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform 0.15s, box-shadow 0.15s;
  background: #1a1a1a;
  color: #fff;
  flex-shrink: 0;
}

.assistant-btn:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0,0,0,.22); }

/* idle */
[data-state="idle"]    .assistant-btn { background: #1a1a1a; }

/* connecting */
[data-state="connecting"] .assistant-btn {
  background: #6b7280;
  animation: pulse 1.2s ease-in-out infinite;
}

/* active */
[data-state="active"] .assistant-btn {
  background: #dc2626;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
}

[data-state="connecting"] .assistant-btn { animation-name: pulse-gray; }
@keyframes pulse-gray {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,114,128,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(107,114,128,0); }
}

.assistant-icon--mic  { display: block; }
.assistant-icon--stop { display: none; }

[data-state="active"] .assistant-icon--mic  { display: none; }
[data-state="active"] .assistant-icon--stop { display: block; }

/* Hide the assistant button when a bottom sheet (bell or user menu) is open on mobile.
   Works because #mobile-backdrop precedes #assistant-widget in the DOM. */
@media (max-width: 639px) {
  .mobile-backdrop--visible ~ #assistant-widget { display: none; }
}