/* Spotify-Style Audio Player - No Nesting */
:root {
  /* Import motion variables from main CSS */
  --motion-standard: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-emphasize: 500ms cubic-bezier(0.4, 0, 0, 1);
}

.audio-player {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}

.audio-player--visible {
  display: block;
}

/* Backdrop with tasteful blur */
.audio-player::before {
  content: '';
  position: absolute;
  inset: 0;
  background: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--motion-standard);
  opacity: 0;
}

.audio-player--visible::before {
  opacity: 1;
}

.audio-player__container {
  position: absolute;
  top: 47.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, 90vw);
  max-height: 90vh;
  background: light-dark(#ffffff, #181818);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Enhanced multi-layer shadow system without scrim */
  box-shadow: 
    /* Inner shadow for depth */
    0 2px 4px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2)),
    /* Main elevation shadow */
    0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)),
    /* Outer soft shadow for separation */
    0 24px 48px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3)),
    /* Theme color glow (subtle) */
    0 0 64px var(--dynamic-shadow-player, light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)));
  /* Adaptive border for definition */
  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
}

/* Header */
.audio-player__header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: light-dark(#f8f9fa, #202020);
  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
}

.audio-player__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: light-dark(#666666, #b3b3b3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border-radius: 50%;
  order: 2; /* Move to end */
}

.audio-player__close:hover {
  color: light-dark(#000000, white);
  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
}

.audio-player__header-content {
  flex: 1;
  text-align: left;
  overflow: hidden;
  padding: 0 8px 0 7px;
  order: 1; /* Keep in middle */
}

.audio-player__header-title {
  font-size: 14px;
  font-weight: 600;
  color: light-dark(#000000, white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-player__header-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: light-dark(#666666, #b3b3b3);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* Loading State - Now integrated into play button */
.audio-player__loading {
  display: none; /* Hidden by default, shown only on first load */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 20px;
  min-height: 196px;
}

.audio-player__loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  border-top-color: var(--dynamic-color-primary, var(--dynamic-color-primary-dark, #66b0ff));
  border-radius: 50%;
  animation: spotify-spin 0.8s linear infinite;
}

.audio-player__loading-text {
  color: light-dark(#666666, #b3b3b3);
  font-size: 14px;
}

/* Main Player */
.audio-player__main {
  display: none;
  flex-direction: column;
  padding: 24px;
  background: light-dark(#ffffff, #181818);
  flex: 1;
  min-height: 196px;
}


/* Progress Section */
.audio-player__progress-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-player__progress-bar {
  height: 8px;
  background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  overflow: visible;
  /* Add padding to create visual height without layout shift */
  padding: 1px 0;
  margin: -1px 0;
}

.audio-player__progress-bar:hover {
  /* No height change - use transform instead */
  background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15));
}

.audio-player__progress-fill {
  height: 6px;
  background: light-dark(var(--dynamic-color-primary, #007bff), var(--dynamic-color-primary-dark, #66b0ff));
  border-radius: 3px;
  width: 0%;
  transition: width 0.2s;
  position: relative;
  /* Center the fill within the 8px container */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.audio-player__progress-bar:hover .audio-player__progress-fill {
  background: var(--dynamic-color-primary-hover, light-dark(var(--dynamic-color-primary, #007bff), var(--dynamic-color-primary-dark, #66b0ff)));
}

.audio-player__progress-thumb {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
  pointer-events: none;
}

.audio-player__progress-thumb:active {
  cursor: grabbing;
  transform: translateY(-50%) scale(1.2);
}

.audio-player__progress-bar:hover .audio-player__progress-thumb {
  opacity: 1;
}

.audio-player__time {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: light-dark(#666666, #b3b3b3);
  font-variant-numeric: tabular-nums;
}

/* Playback Controls */
.audio-player__controls {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 21px;
  margin-top: 5px;
  width: 100%;
  min-height: 77px; /* Height of enlarged play button */
}

/* Play Group - Absolutely centered */
.audio-player__play-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  width: auto;
}

/* Masking circle for play button slicing effect - scaled up */
.audio-player__play-mask {
  position: absolute;
  width: 86px; /* 77px button + 9px for border effect */
  height: 86px;
  background: light-dark(#ffffff, #181818);
  border-radius: 50%;
  z-index: 2; /* Above prev/next buttons but below play button */
  pointer-events: none; /* Don't interfere with button clicks */
  /* No shadow - this is just a mask */
}

/* Full circle buttons with overlap - increased by 20% */
.audio-player__moon-btn {
  width: 62px; /* 52px * 1.2 = 62.4px */
  height: 62px;
  aspect-ratio: 1; /* Ensure perfect circle */
  border: none;
  cursor: pointer;
  background: var(--dynamic-color-secondary, #0288d1);
  transition: all var(--motion-standard), background-color 600ms ease-in-out, box-shadow 600ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px var(--dynamic-shadow-button, rgba(0, 0, 0, 0.25));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Additional iOS-specific fixes */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  /* Force remove iOS button styles */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: padding-box;
}

/* Overlap positioning - adjusted for larger buttons */
.audio-player__moon-btn--prev {
  margin-right: -26px; /* Increased overlap to maintain visual balance */
  z-index: 1;
  position: relative;
  left: -3px; /* Shift left for better visual spacing */
}

.audio-player__moon-btn--next {
  margin-left: -26px; /* Increased overlap to maintain visual balance */
  z-index: 1;
  position: relative;
  right: -3px; /* Shift right for better visual spacing */
}

/* Hover states */
@media (hover: hover) {
  .audio-player__moon-btn:hover:not(:disabled) {
    background: var(--dynamic-color-secondary-hover, #039be5);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px var(--dynamic-shadow-button-hover, rgba(0, 0, 0, 0.35));
  }
  
  .audio-player__moon-btn:hover:not(:disabled) img {
    transform: scale(1.1);
  }
}

/* Active states with juicy feedback */
.audio-player__moon-btn:active:not(:disabled) {
  transform: scale(0.92);
  background: color-mix(in srgb, var(--dynamic-color-secondary, #0288d1) 70%, black);
  box-shadow: 0 2px 8px var(--dynamic-shadow-button, rgba(0, 0, 0, 0.15));
}


/* Disabled state */
.audio-player__moon-btn:disabled {
  background: #424242;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

/* Icons inside moon buttons - scaled proportionally */
.audio-player__moon-btn img {
  width: 29px; /* 24px * 1.2 = 28.8px */
  height: 29px;
  /* Dynamic filter based on contrast - same as bottom bar */
  filter: invert(1);
  flex-shrink: 0;
  position: absolute;
  z-index: 1;
  transition: transform var(--motion-standard), filter 600ms ease-in-out;
  pointer-events: none;
}

/* Center icons in the visible part of overlapped buttons - adjusted for larger size */
.audio-player__moon-btn--prev img {
  position: relative;
  left: -11px; /* Adjusted shift for larger button */
  pointer-events: none; /* Prevent img from intercepting touches */
}

.audio-player__moon-btn--next img {
  position: relative;
  left: 11px; /* Adjusted shift for larger button */
  pointer-events: none; /* Prevent img from intercepting touches */
}


/* Loading animation */
.audio-player__moon-btn.loading {
  animation: button-loading 0.5s ease;
}

/* Celebration animation for moon buttons */
.audio-player__moon-btn.celebrating {
  animation: moon-celebrate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes button-loading {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes moon-celebrate {
  0% {
    transform: scale(1) rotate(0deg);
  }
  10% {
    transform: scale(0.85) rotate(-3deg);
  }
  30% {
    transform: scale(1.15) rotate(3deg);
  }
  50% {
    transform: scale(0.95) rotate(-1deg);
  }
  70% {
    transform: scale(1.05) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.audio-player__control-btn {
  border: none;
  background: var(--dynamic-color-primary-dark, #66b0ff);
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--dynamic-shadow-button, rgba(0, 0, 0, 0.3));
}

.audio-player__control-btn:hover {
  box-shadow: 0 6px 16px var(--dynamic-shadow-button-hover, rgba(0, 0, 0, 0.4));
}

/* Only apply transform on desktop to prevent mobile tap issues */
@media (hover: hover) and (pointer: fine) {
  .audio-player__control-btn:hover {
    transform: translateY(-2px);
  }
}

.audio-player__control-btn:active {
  transform: scale(0.92);
}

.audio-player__control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.audio-player__control-btn:disabled:hover {
  transform: none;
  box-shadow: 0 4px 12px var(--dynamic-shadow-button, rgba(0, 0, 0, 0.3));
}

.audio-player__control-btn--primary {
  width: 77px; /* 64px * 1.2 = 76.8px */
  height: 77px;
  aspect-ratio: 1; /* Ensure perfect circle */
  background: light-dark(var(--dynamic-color-primary, #007bff), var(--dynamic-color-primary-dark, #66b0ff));
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 4px 12px var(--dynamic-shadow-primary, rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Border removed - using separate mask element instead */
  border: none;
  box-sizing: content-box;
  transition: all var(--motion-standard), background-color 600ms ease-in-out, box-shadow 600ms ease-in-out;
}

/* Loading state for play button */
.audio-player__control-btn--primary.loading {
  position: relative;
  cursor: wait;
}

.audio-player__control-btn--primary.loading::after {
  content: '';
  position: absolute;
  width: 60px; /* 50px * 1.2 = 60px */
  height: 60px;
  border: 3px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
  border-top-color: var(--dynamic-text-primary, light-dark(#000000, white));
  border-radius: 50%;
  animation: spotify-spin 0.8s linear infinite;
}

.audio-player__control-btn--primary.loading svg {
  opacity: 0;
}

@media (hover: hover) {
  .audio-player__control-btn--primary:hover {
    transform: translateY(-3px) scale(1.05);
    background: var(--dynamic-color-primary-hover, color-mix(in srgb, light-dark(var(--dynamic-color-primary, #007bff), var(--dynamic-color-primary-dark, #66b0ff)) 85%, black));
    box-shadow: 0 8px 20px var(--dynamic-shadow-primary-hover, rgba(0, 0, 0, 0.5));
  }
  
  .audio-player__control-btn--primary:hover svg {
    transform: scale(1.1);
  }
}

.audio-player__control-btn--primary svg {
  width: 38px; /* 32px * 1.2 = 38.4px */
  height: 38px;
  display: block;
  /* Filter is dynamically set by ThemeManager based on background contrast */
  transition: transform var(--motion-standard), filter 600ms ease-in-out;
}

.audio-player__control-btn--secondary {
  min-width: 60px;
  background: var(--dynamic-color-complementary, #28a745);
  color: var(--dynamic-text-complementary, white);
  box-shadow: 0 4px 12px var(--dynamic-shadow-button, rgba(0, 0, 0, 0.3));
  transition: all var(--motion-standard), background-color 600ms ease-in-out, box-shadow 600ms ease-in-out, color 600ms ease-in-out;
}

/* Fine-tune side button positioning */
#radio-speed-btn {
  position: relative;
  left: -1px;
}

#radio-depth-btn {
  position: relative;
  right: -1px;
}

@media (hover: hover) {
  .audio-player__control-btn--secondary:hover {
    background: var(--dynamic-color-complementary-hover, #32c257);
    box-shadow: 0 6px 16px var(--dynamic-shadow-button-hover, rgba(0, 0, 0, 0.4));
    transform: translateY(-2px);
  }
}

/* Bottom Options */
.audio-player__options {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
}

.audio-player__option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.audio-player__option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--dynamic-color-primary-material, var(--dynamic-color-primary-dark, #66b0ff));
  cursor: pointer;
}

.audio-player__option span {
  font-size: 14px;
  color: light-dark(#666666, #b3b3b3);
  user-select: none;
}

.audio-player__option:hover span {
  color: light-dark(#000000, white);
}

@keyframes spotify-spin {
  to { transform: rotate(360deg); }
}


/* Override for visibility */
.audio-player--visible {
  display: block;
}

/* WebRTC Voice Chat - Premium Design */
.webrtc-controls {
  min-height: 250px;
  padding: 16px 24px 28px;  /* Reduced top, increased bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;  /* Balanced spacing between sections */
  background: 
    radial-gradient(circle at center, 
      light-dark(
        rgba(33, 150, 243, 0.06),
        rgba(33, 150, 243, 0.1)
      ) 0%, 
      transparent 60%),
    light-dark(
      linear-gradient(180deg, rgba(33, 150, 243, 0.02) 0%, transparent 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%)
    );
  position: relative;
  overflow: hidden;
}


/* AI Avatar */
.webrtc-avatar-container {
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 0;  /* Clean spacing, let gap handle it */
}

.webrtc-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webrtc-avatar-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, 
    light-dark(rgba(144, 202, 249, 0.4), rgba(30, 136, 229, 0.3)) 0%, 
    transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.webrtc-avatar.active .webrtc-avatar-glow {
  opacity: 1;
}

.webrtc-avatar-core {
  position: relative;
  width: 60px;
  height: 60px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  overflow: visible;
}

/* Dynamic geometric pattern */
.webrtc-avatar-core::before,
.webrtc-avatar-core::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid;
  animation: rotate-orbit 8s linear infinite;
}

.webrtc-avatar-core::before {
  border-color: transparent transparent transparent #2196f3;
  transform: rotate(0deg);
}

.webrtc-avatar-core::after {
  border-color: #42a5f5 transparent transparent transparent;
  transform: rotate(120deg);
  animation-delay: -2.67s;
}

@keyframes rotate-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* Central dynamic core */
.webrtc-avatar-pulse {
  width: 24px;
  height: 24px;
  background: #2196f3;
  border-radius: 50%;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 0 2px light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.3)),
    0 0 30px rgba(33, 150, 243, 0.6);
  animation: pulse-morph 4s ease-in-out infinite;
}

/* Inner dot */
.webrtc-avatar-pulse::before {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  opacity: 0.9;
}

@keyframes pulse-morph {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
  25% {
    transform: scale(1.1) rotate(90deg);
    border-radius: 45%;
  }
  50% {
    transform: scale(1) rotate(180deg);
    border-radius: 50%;
  }
  75% {
    transform: scale(0.9) rotate(270deg);
    border-radius: 45%;
  }
}

/* Animated rings - removed for cleaner look */
.webrtc-avatar-ring {
  display: none;
}

.webrtc-avatar-ring--1 {
  inset: -10px;
  animation-delay: 0s;
}

.webrtc-avatar-ring--2 {
  inset: -25px;
  animation-delay: 1s;
}

.webrtc-avatar-ring--3 {
  inset: -40px;
  animation-delay: 2s;
}

@keyframes ring-pulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Conversation State */
.webrtc-conversation-state {
  text-align: center;
  min-height: 36px;
  z-index: 1;
  margin-bottom: 8px;  /* Add space before buttons */
}

.webrtc-state-text {
  font-size: 20px;
  font-weight: 600;
  color: light-dark(#1a1a1a, #ffffff);
  margin-bottom: 4px;
  transition: all 0.3s ease;
  letter-spacing: -0.02em;
}

.webrtc-state-subtitle {
  font-size: 14px;
  color: light-dark(#666666, #aaaaaa);
  opacity: 0.9;
  transition: all 0.3s ease;
  font-weight: 400;
}

/* Removed waveform visualizer - cleaner design */

/* Control Buttons Container */
.webrtc-controls-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.webrtc-controls-spacer {
  width: 1px;
  height: 40px;
  background: light-dark(
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1)
  );
}

/* Modern Button Design */
.webrtc-btn {
  position: relative;
  border: none;
  cursor: pointer;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.webrtc-btn:active {
  transform: scale(0.95);
}

.webrtc-btn-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.webrtc-btn-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webrtc-btn-icon img {
  /* Icons need proper contrast based on button background */
  transition: all 0.3s ease;
}

/* Force icon color using multiple approaches */
.webrtc-btn-icon {
  /* Set white color context for SVG */
  color: white;
}

/* Mic button icon contrast */
.webrtc-btn--mic .webrtc-btn-icon img {
  /* Properly proportioned icons */
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

.webrtc-btn--mic.muted .webrtc-btn-icon img {
  /* Muted state */
  width: 32px;
  height: 32px;
  filter: light-dark(none, brightness(0) invert(1)) !important;
  -webkit-filter: light-dark(none, brightness(0) invert(1)) !important;
}

/* End button - force white icons */
.webrtc-btn--end .webrtc-btn-icon img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

/* Microphone Button - Premium style with proper sizing */
.webrtc-btn--mic {
  width: 64px;  /* Increased by ~15% from 56px */
  height: 64px;
}

.webrtc-btn--mic .webrtc-btn-bg {
  background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
  box-shadow: 
    0 2px 8px rgba(33, 150, 243, 0.25),
    0 1px 3px rgba(33, 150, 243, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.webrtc-btn--mic:hover .webrtc-btn-bg {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
  transform: scale(1.08);
  box-shadow: 
    0 4px 16px rgba(33, 150, 243, 0.35),
    0 2px 6px rgba(33, 150, 243, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.webrtc-btn--mic.muted .webrtc-btn-bg {
  background: light-dark(
    linear-gradient(135deg, #fafafa 0%, #e0e0e0 100%),
    linear-gradient(135deg, #424242 0%, #303030 100%)
  );
  box-shadow: 
    0 2px 6px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3)),
    0 1px 3px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)),
    inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
}

/* Pulse animation for active mic */
.webrtc-btn-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--dynamic-color-primary-material-base, #2196f3);
  opacity: 0;
  pointer-events: none;
}

.webrtc-btn--mic:not(.muted) .webrtc-btn-pulse {
  animation: mic-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes mic-pulse {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* End Button - Premium style with danger red */
.webrtc-btn--end {
  width: 64px;  /* Increased by ~15% from 56px */
  height: 64px;
}

.webrtc-btn--end .webrtc-btn-bg {
  background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%);
  box-shadow: 
    0 2px 8px rgba(211, 47, 47, 0.25),
    0 1px 3px rgba(211, 47, 47, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.webrtc-btn--end:hover .webrtc-btn-bg {
  background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
  transform: scale(1.08);
  box-shadow: 
    0 4px 16px rgba(211, 47, 47, 0.35),
    0 2px 6px rgba(211, 47, 47, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 380px) {
  .webrtc-controls {
    padding: 16px 24px 28px;
  }
  
  .webrtc-avatar-container {
    width: 100px;
    height: 100px;
  }
  
  .webrtc-avatar-core {
    width: 70px;
    height: 70px;
  }
  
  .webrtc-btn--mic {
    width: 64px;
    height: 64px;
  }
  
  .webrtc-btn--end {
    width: 64px;
    height: 64px;
  }
  
  .webrtc-controls-container {
    gap: 32px;
  }
}