[vw].enabled {
  position: fixed !important;
  z-index: 2147483647 !important;
  display: block !important;
}

[vw].centered {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

[vw-access-button].permanently-hidden {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

[vw-plugin-wrapper].active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.status {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.status.ready {
  background-color: var(--muted);
  color: white;
}

.status.connecting {
  background-color: var(--warning);
  color: white;
  animation: pulse 1.5s infinite;
}

.status.connected {
  background-color: var(--secondary);
  color: white;
}

.status.disconnected {
  background-color: var(--muted);
  color: white;
}

.status.error {
  background-color: var(--danger);
  color: white;
  animation: shake 0.5s;
}

.status.reconnecting {
  background-color: var(--warning-dark);
  color: white;
  animation: pulse 1s infinite;
}

.status.processing {
  background-color: var(--primary);
  color: white;
  animation: pulse 2s infinite;
}

.status.mic_error {
  background-color: var(--danger-dark);
  color: white;
}

.back-link-container {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 998;
}

.back-link {
  background: white;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  font-size: 0.9rem;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-link:hover {
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@media (max-width: 450px) {
  .status {
    font-size: 0.8rem;
  }

  .back-link {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}