/* Add these styles to your styles.css file */

/* Info tooltip styling */
.info-tooltip {
  cursor: help;
  position: relative;
  margin-left: 5px;
  color: #3498db;
}

.info-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 10;
}

/* Recognition method toggle styling */
#use-browser-recognition {
  accent-color: #4CAF50;
}

/* Speech recognition source indicator */
.recognition-source {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  margin-left: 10px;
  background-color: #e3f2fd;
  color: #1565c0;
}

/* Status indicator for browser recognition */
.using-browser {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.using-deepgram {
  background-color: #e3f2fd;
  color: #1565c0;
}