:root {
  /* Core colors */
  --bg-color: #f3f4f6; /* Light gray background */
  --header-bg: #2f3542; /* Medium gray for headers */
  --text-color: #1f2937; /* Dark gray for primary text */
  --editor-bg: #e5e7eb; /* Slightly darker gray for editor background */
  --border-color: #d1d5db; /* Gray for borders */
  --control-btn-bg: rgba(107, 114, 128, 0.1); /* Semi-transparent gray for control buttons */
  --modal-bg: #ffffff; /* White background for modals */
  --modal-text: #374151; /* Dark gray for modal text */

  
  
  /* Additional theme elements - keep existing variables */
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --secondary: #10B981;
  --accent: #F59E0B;
  --danger: #ef4444;
  --text-light: #4b5563;
  --text-lighter: #9ca3af;
  --text-white: #ffffff;
  
  /* Chatbot specific colors */
  --chat-primary: var(--primary);
  --chat-secondary: var(--primary-dark);
  --chat-bg: #ffffff;
  --chat-user-bubble: #e9ecef;
  --chat-bot-bubble: #e9d8fd;
  --chat-header-bg: var(--header-bg);
  
  /* Shadow styles */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  
  /* Animation durations */
  --transition-fast: 0.2s;
  --transition-normal: 0.2s;
  --transition-slow: 0.5s;
}

/* Dark mode theme variant */
.dark-mode {
  --bg-color: #1f2937;
  --header-bg: #3730a3;
  --text-color: #f9fafb;
  --editor-bg: #111827;
  --border-color: #374151;
  --control-btn-bg: rgba(255, 255, 255, 0.05);
  --modal-bg: #1f2937;
  --modal-text: #f3f4f6;
  
  /* Chatbot specific colors - dark mode */
  --chat-bg: #111827;
  --chat-user-bubble: #374151;
  --chat-bot-bubble: #4338ca;
  --chat-header-bg: #3730a3;
} 

.editor-controls .control-group:nth-child(3) {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  pointer-events: none; /* Prevents interaction with hidden buttons */
}

/* Fix for chat action button tooltips */
.chat-tooltip {
  visibility: hidden;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  pointer-events: none;
}

.group:hover .chat-tooltip {
  visibility: visible;
  opacity: 1;
}