/* mute-control.css — shared styles for the global mute button + status toast.
   Used by index.html. The host page must define these custom properties in :root:
     --accent  (button color when live)
     --border  (status toast border color) */

#mute-status {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(20,20,24,0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 20;
  display: none;
  text-align: center;
}
#mute-status.error { border-color: #e04b4b; }

#control-buttons {
  position: relative;
  z-index: 6;
  flex: 0 0 150px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#master-mute, #master-mic, #chat-toggle {
  width: 100%;
  height: 75px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #27d16b, var(--accent));
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 3px rgba(255,255,255,0.08);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#master-mute { display: none; }
#master-mic  { display: flex; }
#chat-toggle { display: none; background: radial-gradient(circle at 35% 30%, #4aa3ff, #1f6fd4); }
#master-mute:hover,  #master-mic:hover,  #chat-toggle:hover  { transform: scale(1.06); }
#master-mute:active, #master-mic:active, #chat-toggle:active { transform: scale(0.94); }
#master-mute[aria-pressed="true"], #master-mic[aria-pressed="true"], #chat-toggle[aria-pressed="true"] {
  background: radial-gradient(circle at 35% 30%, #ff5a5a, #d31f2c);
  box-shadow: 0 4px 18px rgba(211,31,44,0.65), 0 0 0 3px rgba(255,255,255,0.12);
}
#master-mute:disabled, #master-mic:disabled { opacity: 0.6; cursor: default; transform: none; }

@media (max-width: 1300px) {
  #control-buttons { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-self: stretch; }
  #master-mute, #master-mic, #chat-toggle { flex: 1 1 48%; width: auto; }
}
@media (max-width: 640px) {
  #control-buttons { gap: 4px; }
  #master-mute, #master-mic, #chat-toggle { height: 44px; font-size: 1.2rem; }
  #master-mute, #master-mic { height: 74px; font-size: calc(1.2rem + 20px); }
}