/* 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, #chat-mute {
  width: 100%;
  height: 75px;
  padding: 0;
  position: relative;
  overflow: hidden;
  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, #master-mic, #chat-mute { height: 51px; font-size: 1.76rem; }
#mic-row {
  display: flex;
  gap: 5px;
  width: 100%;
}
#mic-row > button { flex: 1 1 0; width: auto; min-width: 0; }
#master-mute { display: none; }
#master-mic  { display: flex; }
#chat-toggle { display: none; background: radial-gradient(circle at 35% 30%, #4aa3ff, #1f6fd4); }
#chat-mute {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  width: 100%;
  max-width: 450px;
  height: 80px;
  margin: 25px 0;
  font-size: 2.816rem;
}
html:not([data-hub-chat-only][data-hub-chat-bg="black"]) #chat-mute { display: none !important; }
#master-mute:hover,  #master-mic:hover,  #chat-toggle:hover,  #chat-mute:hover  { transform: scale(1.06); }
#master-mute:active, #master-mic:active, #chat-toggle:active, #chat-mute:active { transform: scale(0.94); }
#master-mute[aria-pressed="true"], #master-mic[aria-pressed="true"], #chat-toggle[aria-pressed="true"], #chat-mute[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, #chat-mute:disabled { opacity: 0.6; cursor: default; transform: none; }
#master-mute.cooldown, #master-mic.cooldown, #chat-mute.cooldown { opacity: 0.55; }
#master-mute.cooldown::after, #master-mic.cooldown::after, #chat-mute.cooldown::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 5px; width: 100%;
  background: rgba(255,255,255,0.85);
  animation: btn-cooldown 5s linear forwards;
}
@keyframes btn-cooldown { from { width: 100%; } to { width: 0; } }

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