/* Bottom-left panel like Discord's: "Voz conectada" card (signal by ping,
   channel, noise, hang up, camera, screen) and the user row (status, mic and
   headphones with device arrows, settings). Plus statuses, camera tiles,
   drag and drop and the "AO VIVO" button. Loaded last. */

/* ---------- one dark panel ---------- */

.voice-bar,
.user-panel {
  background: #232428;
}

.voice-bar {
  display: grid;
  gap: 8px;
  padding: 10px 8px 8px;
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vc-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.vc-signal {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.vc-signal:hover {
  background: var(--bg-hover);
}

/* Three bars, Discord-like: color by ping. */
.vc-signal .bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.vc-signal .bars i {
  display: block;
  width: 4px;
  border-radius: 1px;
  background: currentColor;
}

.vc-signal .bars i:nth-child(1) {
  height: 6px;
}

.vc-signal .bars i:nth-child(2) {
  height: 11px;
}

.vc-signal .bars i:nth-child(3) {
  height: 16px;
}

.vc-signal.good,
.vc-status.good {
  color: #23a55a;
}

.vc-signal.ok,
.vc-status.ok {
  color: #f0b232;
}

.vc-signal.bad,
.vc-status.bad {
  color: #f23f43;
}

.vc-signal.connecting,
.vc-status.connecting {
  color: #f0b232;
}

.vc-signal.ok .bars i:nth-child(3),
.vc-signal.bad .bars i:nth-child(2),
.vc-signal.bad .bars i:nth-child(3) {
  opacity: 0.3;
}

.vc-text {
  flex: 1;
  min-width: 0;
  display: grid;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
  line-height: 1.2;
}

.vc-text:hover .vc-where span {
  text-decoration: underline;
}

.vc-status {
  font-size: 14px;
}

.vc-where {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.vc-where span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-icon {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
}

.vc-icon:hover {
  color: var(--text);
}

.vc-icon.on {
  color: var(--accent);
}

.vc-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vc-btn {
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #2e3035;
  color: var(--text);
  cursor: pointer;
}

.vc-btn:hover {
  background: #3a3c42;
}

.vc-btn.on {
  background: #23a55a;
  color: #fff;
}

/* ---------- user row ---------- */

.user-panel {
  gap: 2px;
  padding: 8px 6px 8px 8px;
}

.device-group {
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.device-group:hover {
  background: var(--bg-hover);
}

.device-group .icon-btn {
  width: 28px;
}

.device-arrow {
  width: 14px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.device-arrow:hover {
  color: var(--text);
}

.device-arrow .chevron-shape {
  width: 6px;
  height: 6px;
  margin: -3px auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.status-text.idle {
  color: #f0b232;
}

.status-text.dnd {
  color: #f23f43;
}

/* ---------- statuses on avatars ---------- */

.status.idle {
  background: #f0b232;
  /* moon: a dark bite in the corner */
  background-image: radial-gradient(circle at 25% 25%, var(--bg-sidebar) 0 38%, transparent 40%);
}

.status.dnd {
  background: #f23f43;
  background-image: linear-gradient(transparent 40%, #fff 40% 60%, transparent 60%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.user-panel .status,
.user-panel .status.idle {
  border-color: #232428;
}

/* ---------- camera tiles ---------- */

.tile-camera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: #000;
}

.tile-camera.mirror {
  transform: scaleX(-1);
}

.voice-cam {
  display: inline-flex;
  color: var(--text-muted);
}

/* "AO VIVO" in the channel list: click to watch that person. */
.live-btn {
  border: 0;
  cursor: pointer;
}

.live-btn:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* ---------- call: bottom right corner (pop out, full screen) ---------- */

.call-stage .stage-controls {
  position: relative;
}

.stage-corner {
  position: absolute;
  right: 14px;
  top: 50%;
  display: flex;
  gap: 4px;
  transform: translateY(-50%);
}

.stage-corner-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #dbdee1;
  cursor: pointer;
}

.stage-corner-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Your own stream: paused preview with Discord's message. */
.viewer-watch.own {
  align-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
}

.viewer-watch-title {
  font-size: 18px;
}

.viewer-watch-text {
  color: #dbdee1;
  font-size: 13px;
}

.stage-grid.strip .viewer-watch-title,
.stage-grid.strip .viewer-watch-text {
  display: none;
}

/* ---------- drag and drop ---------- */

[draggable='true'].dragging {
  opacity: 0.4;
}

.rail-item.drop-before::before,
.rail-item.drop-after::after,
.side-item.drop-before::before,
.side-item.drop-after::after,
div.drop-before::before,
div.drop-after::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--ok);
  pointer-events: none;
  z-index: 5;
}

.drop-before::before {
  top: -3px;
}

.drop-after::after {
  bottom: -3px;
}

.rail-item,
.channel-group > div,
.channel-group > .side-item {
  position: relative;
}

/* Speaking ring stays visible over a camera. */
.call-stage .tile.person::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--ok);
  pointer-events: none;
  transition: box-shadow 0.12s;
}

.call-stage .tile.person.speaking::after {
  box-shadow: inset 0 0 0 3px var(--ok);
}

.call-stage .tile.person .tile-name,
.call-stage .tile.person .tile-live {
  z-index: 1;
}