/* Call Panel - expands/contracts based on room context */
.call-panel {
  display: none; /* Hidden by default until we know the state */

  /* Respect safe areas on iOS devices - conservative padding */
  @supports (padding: max(0px)) {
    padding-top: max(4px, env(safe-area-inset-top));
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
}

/* When IN the call room - minimal, inline in the navbar */
.call-panel--in-room {
  display: inline-flex;
  align-items: center;
}

/* When in DIFFERENT room - display below room name, takes full width to force wrap */
.call-panel--different-room {
  display: flex;
  flex-basis: 100%;
}

.call-panel__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-space-half);
}

/* Room info container - wraps room name and participant count */
.call-panel__room-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  height: var(--btn-size);
  padding: 0 var(--space-s) 0 calc(var(--space-s) * 1.5);
  border: var(--border-width) solid var(--color-border-darker);
  border-radius: var(--btn-border-radius, var(--radius-md));
  background: var(--color-bg);
}

/* Room name in call panel - truncates long names */
.call-panel__room-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active call participant count pill (green) */
.call-panel__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-positive);
  color: white;
  border-radius: var(--btn-border-radius, var(--radius-md));
  font-size: var(--font-size-s);
  font-weight: 700;
  white-space: nowrap;
}

.call-panel__count {
  line-height: 1;
}

/* Mute button - circular with volume ring */
.call-panel__mute {
  border-radius: var(--radius-full) !important;
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

/* Circular volume ring that grows like activity rings */
.call-panel__mute::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Use conic gradient to create a circular progress ring */
  background: conic-gradient(
    var(--ring-color, #22c55e) 0deg,
    var(--ring-color, #22c55e) calc(var(--audio-percentage, 0) * 3.6deg),
    transparent calc(var(--audio-percentage, 0) * 3.6deg)
  );
  /* Create a ring by masking out the center - inner radius slightly larger than button, outer radius for ring width */
  mask: radial-gradient(circle, transparent 19px, black 20px, black 23px, transparent 24px);
  -webkit-mask: radial-gradient(circle, transparent 19px, black 20px, black 23px, transparent 24px);
  pointer-events: none;
}

/* Show the ring when there's audio */
.call-panel__mute[data-audio-level]:not([data-audio-level="0"])::before {
  opacity: 1;
}

/* Always green, no color variations */
.call-panel__mute[data-audio-level]::before {
  --ring-color: rgba(34, 197, 94, 0.8); /* green */
}

.call-panel__mute--muted {
  background: rgba(255, 0, 0, 0.1);
  border-color: var(--color-negative);
}

/* Speaking state handled by the circular ring now */
.call-panel__mute--speaking img {
  animation: mute-icon-pulse 1s ease-in-out infinite;
}

/* Hangup button - circular */
.call-panel__hangup {
  border-radius: var(--radius-full) !important;
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* When in call room - simpler layout */
.call-panel--in-room .call-panel__inner {
  gap: var(--inline-space-half);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .call-panel__inner {
    gap: var(--space-s);
  }

  .call-panel__room-info {
    font-size: var(--font-size-xs);
  }
}

/* Audio Controls (in nav - hidden when global controls active) */
.audio-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Hide in-room controls when global controls are showing */
#global-audio-controls:not([hidden]) ~ #main-content .audio-controls__connected,
body:has(#global-audio-controls:not([hidden])) .audio-controls__connected {
  display: none !important;
}

.audio-controls__connected {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.audio-controls__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-positive);
  color: white;
  border-radius: 14px;
  font-size: var(--font-size-s);
  font-weight: 600;
}

.audio-controls__pill img {
  filter: brightness(0) invert(1);
}

.audio-controls__join,
.audio-controls__exit,
.audio-controls__mute {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}

.audio-controls__settings {
  display: flex;
  align-items: center;
}

/* Mute button states */
.audio-controls__mute {
  position: relative;
}

.audio-controls__mute--muted {
  background: rgba(255, 0, 0, 0.1);
}

/* Speaking animation removed - handled by circular ring */

/* Old box-shadow animation removed - using conic-gradient ring instead */

@keyframes mute-icon-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Composer audio mute button */
.composer__audio-mute {
  margin: 0;
  padding: 0;
  min-width: auto;
  position: relative;
}

.composer__audio-mute--muted {
  opacity: 0.6;
}

/* Speaking animation removed - handled by circular ring */

.composer__audio-mute--speaking img {
  animation: mute-icon-pulse 1s ease-in-out infinite;
}

/* Audio settings menu */
.audio-settings-menu {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-s);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 250px;
}

.audio-settings-menu__section {
  margin-bottom: var(--space-s);
}

.audio-settings-menu__section:last-of-type {
  margin-bottom: 0;
}

.audio-settings-menu__title {
  font-size: var(--font-size-s);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
}

.audio-settings-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-xs) var(--space-s);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-size-s);
  border-radius: var(--border-radius);
  color: var(--color-text);
}

.audio-settings-menu__item:hover {
  background: var(--color-bg-hover, #f5f5f5);
}

.audio-settings-menu__item--selected {
  background: var(--color-bg-selected, #e8f4f8);
  font-weight: 600;
}

.audio-settings-menu__close {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-xs);
  margin-top: var(--space-s);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-size: var(--font-size-s);
  border-radius: var(--border-radius);
  color: var(--color-text);
}

.audio-settings-menu__close:hover {
  background: var(--color-bg-hover, #f5f5f5);
}

/* Loading spinner */
.audio-controls__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: var(--border-width-thick) solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: audio-spinner-rotate 0.6s linear infinite;
}

@keyframes audio-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Error alert */
.audio-controls__alert {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-bg-error, #fee);
  color: var(--color-text-error, #c00);
  border: var(--border-width) solid var(--color-border-error, #fcc);
  border-radius: var(--border-radius, var(--radius-md));
  font-size: var(--font-size-s);
  margin-left: var(--space-s);
  max-width: 400px;
}

.audio-controls__alert-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  opacity: 0.7;
}

.audio-controls__alert-dismiss:hover {
  opacity: 1;
}

/* Speaking indicators - applied to avatars and other elements */
.speaking {
  animation: speaking-pulse 1s ease-in-out infinite;
  position: relative;
}

@keyframes speaking-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--color-positive);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 4px var(--color-positive);
    transform: scale(1.02);
  }
}

/* Room name button when audio is active - removed green borders per user feedback */

.room__audio-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-positive);
  color: white;
  border-radius: 14px;
  font-size: var(--font-size-s);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 8px;
}

.room__audio-indicator img {
  filter: brightness(0) invert(1);
}

/* Room list audio indicator - removed green borders per user feedback */

.room__audio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-positive);
  color: white;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

.room__audio-badge img {
  filter: brightness(0) invert(1);
}

.room__audio-count {
  font-size: var(--font-size-xs);
  line-height: 1;
}

/* Avatar speaking indicator */
.avatar.speaking {
  border: var(--border-width-thick) solid var(--color-positive);
  box-shadow: 0 0 8px var(--color-positive);
}

/* Audio volume meter for microphone testing */
.audio-volume-meter {
  position: relative;
  width: 200px;
  height: 24px;
  background: var(--color-bg-secondary, #f5f5f5);
  border: var(--border-width) solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.audio-volume-meter__bar {
  height: 100%;
  background: linear-gradient(to right, var(--color-positive), var(--color-warning, #ff9500), var(--color-negative));
  border-radius: 12px;
  transition: width 0.05s ease-out;
  width: 0%;
}

/* Message author speaking indicator */
.message__author.speaking strong {
  color: var(--color-positive);
}

/* Audio participant list (for future use) */
.audio-participant {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
}

.audio-participant__indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-text-secondary);
  transition: background 0.2s;
}

.audio-participant__indicator.speaking {
  background: var(--color-positive);
  animation: indicator-pulse 1s infinite;
}

@keyframes indicator-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Speaking indicator (positioned at same level as typing indicator) */
.speaking-indicator {
  inset-block-start: var(--indicator-position, 0.15rem);
  inset-inline-start: var(--block-space);
  opacity: var(--indicator-opacity, 0);
  transition: opacity 0.8s ease-out, inset-block-start 0.2s ease-in-out;
  position: absolute;
}

.speaking-indicator--active {
  --indicator-position: 0.15rem;
  --indicator-opacity: 1;
  transition: opacity 0.2s ease-in, inset-block-start 0.2s ease-in-out;
}

.speaking-indicator__author {
  line-height: 1;
  color: var(--color-positive);
  font-weight: 600;
}

/* Transcription indicator (positioned on right side for current user) */
.transcription-indicator {
  inset-block-start: var(--indicator-position, 0.15rem);
  inset-inline-end: var(--block-space);
  opacity: var(--indicator-opacity, 0);
  transition: opacity 0.8s ease-out, inset-block-start 0.2s ease-in-out;
  position: absolute;
  gap: var(--space-xs);
}

.transcription-indicator--active {
  --indicator-position: 0.15rem;
  --indicator-opacity: 1;
  transition: opacity 0.2s ease-in, inset-block-start 0.2s ease-in-out;
}

.transcription-indicator__text {
  line-height: 1;
  color: var(--color-text-secondary);
  font-style: italic;
}