/* 
 * Enhanced Interview Questions Styles
 * Add visual enhancements and animations to interview questions
 */

/* Question Card Styles - Consistent and Professional */
.interview-question {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  transform-origin: center;
  cursor: default; /* Reset cursor for the whole card */
}

.interview-question:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  /* Keep border consistent - don't change color */
  border-color: #e5e7eb;
}

/* Subtle accent indicator for expanded questions */
.interview-question::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #f97316, #fb923c);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.8;
}

.interview-question.expanded::before {
  transform: scaleY(1);
}

/* Question Header Styles - Professional */
.question-header {
  background: transparent;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
  user-select: none;
  padding: 0.75rem 1rem; /* Reduced vertical padding for better proportion */
  border-radius: 0.5rem 0.5rem 0 0;
  min-height: 2.75rem; /* Smaller min-height for better visual balance */
  display: flex;
  align-items: center;
  justify-content: space-between; /* ensure right-side actions stick to the edge */
  gap: 0.5rem;
  line-height: 1.5; /* Define line-height for proper inheritance */
}

.question-header:hover {
  background: linear-gradient(to right, rgba(249, 115, 22, 0.02), transparent);
}

.interview-question.expanded .question-header {
  background: linear-gradient(to right, rgba(249, 115, 22, 0.02), rgba(249, 115, 22, 0.04));
  border-bottom: 1px solid rgba(249, 115, 22, 0.1);
}

/* Ensure proper flex alignment for question header content */
.question-header > .flex {
  width: 100%;
  display: flex; /* keep a predictable flex container */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Question title styling - Consistent sizing */
.question-header h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1f2937;
  line-height: inherit; /* Use parent's line height for better alignment */
  margin: 0;
  transition: color 0.2s ease;
  max-width: 100%;
  /* Prevent JS from overriding */
  font-size: 0.9375rem !important;
  padding-right: 0.5rem;
  flex: 1 1 auto; /* take remaining space predictably */
  display: flex;
  align-items: center; /* Center text vertically within h3 */
  min-height: 1.5rem;
}

.interview-question:hover .question-header h3 {
  color: #ea580c;
}

.interview-question.expanded .question-header h3 {
  color: #ea580c;
  font-weight: 600;
}

/* Responsive layout for question headers */
@media (max-width: 640px) {
  .question-header h3 {
    font-size: 0.875rem !important;
  }
  
  .question-header .flex.items-center.gap-2.flex-shrink-0 {
    padding-left: 0.25rem;
  }
}

/* Smooth toggle icon animation */
.toggle-icon,
.expand-icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  color: #6b7280;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  transform-origin: center;
}

.interview-question:hover .toggle-icon,
.interview-question:hover .expand-icon {
  color: #f97316;
}

.interview-question.expanded .toggle-icon,
.interview-question.expanded .expand-icon {
  color: #f97316;
  transform: rotate(180deg);
}

/* Difficulty Badge Animations */
.interview-question:hover .inline-flex.items-center.px-2\.5.py-0\.5.rounded-full {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Question Number Styles - Consistent */
.question-number {
  font-weight: 600;
  font-size: 0.8125rem !important;
  color: #f97316;
  flex-shrink: 0;
  min-width: 1.75rem;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  align-self: center; /* Ensure vertical centering */
  margin-top: 0;
  margin-bottom: 0;
}

/* Ensure proper flex alignment for inner containers */
.question-header .flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.question-header .flex.items-center.flex-1 {
  display: flex;
  align-items: center;
  min-width: 0; /* allow text ellipsis */
  flex: 1 1 auto;
}

/* Ensure badges container stays at the right */
.question-header .flex.items-center.gap-2.flex-shrink-0 {
  margin-left: auto;
  padding-left: 0.5rem;
  gap: 0.5rem;
  display: flex;
  align-items: center;
  align-self: stretch; /* align with header height */
}

/* Ensure all badge elements are properly centered */
.question-header .difficulty-badge,
.question-header .premium-badge,
.question-header .toggle-icon {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

/* Premium Tag Animation */
.interview-question:hover .px-3.py-1.text-xs.font-medium.text-white.bg-orange-500.rounded-full {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Answer Content - Completely hidden when collapsed */
.answer-content {
  display: none; /* Completely hide when collapsed */
  overflow: hidden;
  border-top: 0;
}

.answer-content.show {
  display: block;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  animation: slideDown 0.3s ease-out;
}

/* Smooth slide down animation */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 2000px; /* Large enough for any content */
    transform: translateY(0);
  }
}

.answer-content > div {
  padding: 1.25rem 1rem;
  overflow: hidden;
}

.answer-content .prose {
  background-color: transparent;
}

/* Footer styles removed - no longer needed as footer content was removed */
/* Previously styled .answer-container .px-5.py-3 elements */

/* Ensure the footer is always at the bottom */
.answer-container {
  display: flex;
  flex-direction: column;
}

/* Answer Footer Styles - Professional separator and actions */
.answer-footer {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.answer-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Expand Question Button Styles */
.expand-question-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem; /* Increased vertical padding to match height */
  height: 32px; /* Fixed height to match Explain AI button */
  background: transparent;
  border: 1px solid #fed7aa;
  border-radius: 0.5rem;
  color: #ea580c;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.expand-question-btn:hover {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #f97316;
  color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

.expand-question-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.1);
}

.expand-question-btn .expand-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.expand-question-btn:hover .expand-icon {
  transform: scale(1.1) rotate(5deg);
}

.expand-question-btn .expand-text {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.explain-answer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  height: 32px; /* Fixed height to match expand button */
  background: transparent;
  border: 1px solid #fed7aa;
  color: #ea580c;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.explain-answer-btn:hover {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #f97316;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

.explain-answer-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.1);
}

/* Subtle hover animation effect */
.explain-answer-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.1), transparent);
  transition: left 0.5s ease;
}

.explain-answer-btn:hover::before {
  left: 100%;
}

/* AI Icon styling */
.explain-answer-btn .explain-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.explain-answer-btn:hover .explain-icon {
  opacity: 1;
  transform: rotate(180deg);
}

/* Text styling */
.explain-answer-btn .explain-text {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* AI superscript indicator */
.explain-answer-btn .ai-indicator {
  font-size: 0.625rem;
  margin-left: 0.125rem;
  opacity: 0.85;
  vertical-align: super;
  font-weight: 600;
  color: inherit;
}

/* Credits badge styling */
.explain-answer-btn .credits-badge {
  background: #fff7ed;
  color: #c2410c;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: 0.25rem;
  border: 1px solid rgba(194, 65, 12, 0.2);
  transition: all 0.2s ease;
}

.explain-answer-btn:hover .credits-badge {
  background: #fed7aa;
  border-color: rgba(194, 65, 12, 0.3);
}

.answer-container > .p-5 {
  flex: 1;
}

.answer-container > .px-5.py-3 {
  flex-shrink: 0;
  margin-top: auto;
}

/* Code Block Styles - Refined */
pre {
  transition: box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  margin: 1rem 0;
}

pre:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

pre + pre {
  margin-top: 1rem;
}

/* Custom scrollbar for code blocks */
pre::-webkit-scrollbar {
  height: 8px;
  background-color: #2d3748;
}

pre::-webkit-scrollbar-thumb {
  background-color: #4a5568;
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
  background-color: #718096;
}

/* Language bar styling */
.bg-gray-800 {
  background-color: #1e293b;
}

/* Copy Code Button Animation */
.copy-code {
  transition: all 0.2s ease-in-out;
}

.copy-code:hover {
  transform: scale(1.1);
}

/* Difficulty Indicator Colors - Enhanced */
.difficulty-indicator-beginner,
.bg-green-500 {
  background-color: rgb(34 197 94) !important;
}

.difficulty-indicator-intermediate,
.bg-yellow-500 {
  background-color: rgb(234 179 8) !important;
}

.difficulty-indicator-advanced,
.bg-orange-500 {
  background-color: rgb(249 115 22) !important;
}

.difficulty-indicator-expert,
.bg-red-500 {
  background-color: rgb(239 68 68) !important;
}

/* Difficulty Filter Checkboxes - Professional Style */
.difficulty-checkbox-container {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}

.difficulty-checkbox-container:hover {
  transform: translateY(-1px);
}

.difficulty-checkbox-container .custom-checkbox {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  transition: all 0.2s ease;
}

.difficulty-checkbox-container input:checked ~ .custom-checkbox {
  background: linear-gradient(135deg, #f97316, #fb923c);
  border-color: #f97316;
}

.difficulty-checkbox-container input:checked ~ .custom-checkbox svg {
  opacity: 1;
}

.difficulty-checkbox-container:hover .custom-checkbox {
  border-color: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Filter Buttons */
.filter-button {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.filter-button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #f97316;
  transition: all 0.2s ease;
  transform: translateX(-50%);
}

.filter-button:hover::after {
  width: 100%;
}

.filter-button.active {
  color: #f97316;
  font-weight: 600;
}

.filter-button.active::after {
  width: 100%;
}

/* Difficulty Pill Styles */
.difficulty-pill {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-width: 1px;
  border-style: solid;
}

.difficulty-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* All Levels pill */
.difficulty-pill[data-difficulty="all"] {
  background-color: white;
  color: #64748b;
  border-color: #e2e8f0;
}

.difficulty-pill[data-difficulty="all"].active {
  background-color: #f1f5f9;
  border-color: #64748b;
  color: #1e293b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  transform: translateY(-1px);
}

/* Beginner pill */
.difficulty-pill[data-difficulty="beginner"] {
  background-color: white;
  color: #15803d;
  border-color: #dcfce7;
}

.difficulty-pill[data-difficulty="beginner"].active {
  background-color: #dcfce7;
  border-color: #15803d;
  color: #166534;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  transform: translateY(-1px);
}

/* Intermediate pill */
.difficulty-pill[data-difficulty="intermediate"] {
  background-color: white;
  color: #a16207;
  border-color: #fef9c3;
}

.difficulty-pill[data-difficulty="intermediate"].active {
  background-color: #fef9c3;
  border-color: #a16207;
  color: #854d0e;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  transform: translateY(-1px);
}

/* Advanced pill */
.difficulty-pill[data-difficulty="advanced"] {
  background-color: white;
  color: #b91c1c;
  border-color: #fee2e2;
}

.difficulty-pill[data-difficulty="advanced"].active {
  background-color: #fee2e2;
  border-color: #b91c1c;
  color: #991b1b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  transform: translateY(-1px);
}

/* Add a subtle scale animation when clicking */
.difficulty-pill:active {
  transform: scale(0.95);
}

/* Add a subtle pulse animation for active pills */
@keyframes subtle-pulse {
  0% { transform: translateY(-1px) scale(1); }
  50% { transform: translateY(-1px) scale(1.02); }
  100% { transform: translateY(-1px) scale(1); }
}

.difficulty-pill.active {
  animation: subtle-pulse 2s ease-in-out infinite;
}

.difficulty-pill:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

/* Sidebar Animation */
#categorySidebar {
  transition: all 0.3s ease;
  font-family: 'Inter var', sans-serif;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

#categorySidebar:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Make the scrollbar in sidebar more refined */
#categorySidebar .overflow-y-auto::-webkit-scrollbar {
  width: 5px;
  background-color: transparent;
}

#categorySidebar .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 9999px;
}

#categorySidebar .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Improve the sidebar scrolling area */
#categorySidebar .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  padding: 0.5rem 0;
}

/* Group item and active group styling */
.group-item {
  transition: all 0.25s ease;
  font-family: 'Inter var', sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
  border-radius: 0;
  font-size: 0.9rem;
}

.group-item:hover {
  background-color: #fff7ed;
  transform: translateX(2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.group-item.active-group {
  background-color: #fff7ed !important; /* orange-50 */
  font-weight: 500;
  color: #ea580c;
  border-left: 3px solid #ea580c;
  box-shadow: none;
}

.group-item svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.group-item:hover svg {
  transform: translateX(2px);
  color: #ea580c;
}

.group-item span {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Improve the badge styling in the sidebar */
.group-item .text-xs.text-gray-500.bg-gray-100 {
  font-family: 'Inter var', sans-serif;
  transition: all 0.2s ease;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  color: #6b7280;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.group-item:hover .text-xs.text-gray-500.bg-gray-100 {
  background-color: #fed7aa;
  color: #c2410c;
}

.group-item.active-group .text-xs.text-gray-500.bg-gray-100 {
  background-color: #fed7aa;
  color: #c2410c;
}

/* Category Sidebar Header Enhancement */
#categorySidebar .p-4.border-b {
  padding: 1rem 1.25rem;
  background: linear-gradient(to right, #f8fafc, #ffffff);
  border-bottom: 1px solid #e5e7eb;
}

#categorySidebar h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Enhanced search box styling */
#categorySidebar .relative.mt-2 {
  position: relative;
}

#categorySidebar input[type="text"] {
  transition: all 0.25s ease;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  font-size: 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#categorySidebar input[type="text"]:focus {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
  outline: none;
  padding-left: 2.25rem;
}

#categorySidebar .absolute.right-2.top-2 {
  top: 0.75rem;
  right: 0.75rem;
  color: #9ca3af;
  transition: all 0.2s ease;
}

#categorySidebar .absolute.right-2.top-2:hover {
  color: #6b7280;
}

/* Add search icon on the left */
#categorySidebar .relative.mt-2::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  pointer-events: none;
}

/* Add subtle animation for active item */
@keyframes gentle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.3);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(234, 88, 12, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
  }
}

/* Enhance the sidebar header */
#categorySidebar .p-4.border-b {
  background: linear-gradient(120deg, #fafafa, #ffffff);
  border-bottom: 1px solid rgba(229, 231, 235, 0.7);
  padding: 1.25rem;
}

#categorySidebar h3 {
  font-weight: 600;
  font-size: 1.125rem;
  color: #1f2937;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
}

#categorySidebar h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.625rem;
  color: #ea580c;
  filter: drop-shadow(0 1px 1px rgba(234, 88, 12, 0.2));
}

/* Add subtle alternating background for sidebar items */
.group-item:nth-child(odd) {
  background-color: #fafafa;
}

.group-item:nth-child(odd):hover {
  background-color: #fff7ed;
}

/* Bookmark button styles */
.bookmark-btn.bookmarked {
  color: #f97316; /* orange-500 */
  opacity: 1 !important;
}

/* ===== Enhanced Category Tabs ===== */
.category-tabs-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  background-color: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.7);
}

#tabsContainer {
  position: relative;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  padding: 0.75rem 1.5rem;
  gap: 0.25rem;
  border-bottom: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(250, 250, 250, 0.5));
}

.category-tab {
  position: relative;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #64748b;
  border-radius: 0.5rem;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
  background-color: transparent;
}

.category-tab:hover {
  color: #f97316;
  background-color: rgba(249, 115, 22, 0.04);
  transform: translateY(-1px);
}

.category-tab::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #f97316;
  transform: translateX(-50%);
  transition: width 0.3s ease;
  border-radius: 3px;
  opacity: 0;
}

.category-tab:hover::after {
  width: 30%;
  opacity: 0.7;
}

.category-tab.active {
  color: #f97316;
  font-weight: 600;
  background-color: rgba(249, 115, 22, 0.08);
}

.category-tab.active::after {
  width: 60%;
  opacity: 1;
}

/* ===== Simplified Topic Buttons ===== */
#topicsContainer {
  margin-bottom: 2rem;
  position: relative;
}

.topics-fade-enter-active {
  width: 100%;
}

#topicsContainer .flex.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 1.5rem 1rem;
  background-color: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* New simplified topic button styles */
.topic-button {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.topic-button:hover {
  color: #f97316;
  border-bottom-color: #fed7aa;
  transform: translateY(-1px);
}

.topic-button:hover img {
  filter: brightness(1.1) saturate(1.2);
}

.topic-button.selected-topic {
  color: #f97316;
  font-weight: 600;
  border-bottom-color: #f97316;
  background: linear-gradient(to bottom, transparent, rgba(249, 115, 22, 0.05));
}

.topic-button.selected-topic img {
  filter: brightness(1.1) saturate(1.3);
}

.topic-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  border-radius: 0.25rem;
}

/* Icon styling within topic buttons */
.topic-button img {
  transition: all 0.2s ease;
  filter: grayscale(0.2);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .topic-button {
    padding: 0.5rem;
    font-size: 0.8125rem;
  }
  
  .topic-button img {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  #topicsContainer .flex.flex-wrap {
    gap: 0.75rem;
    padding: 1rem 0.5rem;
  }
}

/* Keep the old pill styles but override them when topic-button class is used */
.topic-pill:not(.topic-button) {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.topic-pill:not(.topic-button)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}

.topic-pill:not(.topic-button):hover {
  transform: translateY(-1px);
  border-color: #fdba74;
  color: #c2410c;
  background-color: #fff7ed;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.topic-pill:not(.topic-button).active, 
.topic-pill:not(.topic-button).selected-topic {
  color: #f97316;
  font-weight: 600;
  background-color: rgba(249, 115, 22, 0.28);
}

.topic-pill:not(.topic-button) span {
  position: relative;
  z-index: 2;
}

/* Improved Topics label styling */
/* #topicsContainer::before {
  content: 'Topics';
  position: absolute;
  top: -0.625rem;
  left: 1.5rem;
  transform: none;
  background-color: white;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  border: 1px solid rgba(229, 231, 235, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 5;
} */

/* Scroll buttons styling */
#tabsScrollLeft, 
#tabsScrollRight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(229, 231, 235, 0.8);
  z-index: 10;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tabsScrollLeft {
  left: -0.5rem;
}

#tabsScrollRight {
  right: -0.5rem;
}

#tabsScrollLeft:hover,
#tabsScrollRight:hover {
  background-color: #fff7ed;
  border-color: #fdba74;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%) scale(1.05);
}

#tabsScrollLeft svg,
#tabsScrollRight svg {
  color: #f97316;
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

#tabsScrollLeft:hover svg,
#tabsScrollRight:hover svg {
  transform: scale(1.1);
}

/* Improve active topic styling to stand out more */
.topic-pill.active, 
.topic-pill.selected-topic {
  position: relative;
}

.topic-pill.active::after,
.topic-pill.selected-topic::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  z-index: -1;
  background: linear-gradient(to right, rgba(249, 115, 22, 0.3), rgba(251, 146, 60, 0.3));
  opacity: 0;
}

@keyframes pulse-border {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Enhanced topic container fade in animation */
.topics-fade-enter-active {
  animation: slide-in-topics 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-in-topics {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main Content Animation */
.category-content {
  animation: fadeIn 0.3s ease-out;
}

/* Animations for page transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Mobile sidebar styles */
@media (max-width: 768px) {
  .interview-question:hover {
    transform: none;
  }
  
  .interview-question::before {
    display: none;
  }
  
  .sidebar-mobile-open {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 250px;
    z-index: 40;
    background: white;
    overflow-y: auto;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
  }
  
  body.sidebar-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 35;
  }
  
  /* Improved mobile search UI */
  .search-form-expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: white;
    z-index: 50;
  }
  
  #searchSuggestions.mobile-suggestions {
    position: fixed;
    top: 4.5rem;
    left: 1rem;
    right: 1rem;
    z-index: 50;
    max-height: 70vh;
  }
}

/* Question Card Styles */
.question-card {
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out;
  animation-fill-mode: both;
}

.question-card:hover {
  border-color: #fdba74; /* orange-300 */
}

/* Add a slight delay for various cards using static selectors */
.question-card:nth-child(1) {
  animation-delay: 0s;
}

.question-card:nth-child(2) {
  animation-delay: 0.05s;
}

.question-card:nth-child(3) {
  animation-delay: 0.1s;
}

.question-card:nth-child(4) {
  animation-delay: 0.15s;
}

.question-card:nth-child(5) {
  animation-delay: 0.2s;
}

.question-card:nth-child(n+6) {
  animation-delay: 0.25s;
}

.qa-container .bg-gradient-to-r {
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Answer styles */
.answer-preview {
  position: relative;
  padding-left: 1.5rem;
}

.answer-preview::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #d1d5db; /* gray-300 */
  border-radius: 3px;
}

.answer-preview:hover {
  color: #4b5563; /* gray-700 */
}

.toggle-answer-btn {
  background-color: #fff7ed; /* orange-50 */
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.toggle-answer-btn:hover {
  background-color: #ffedd5; /* orange-100 */
}

/* Tag styles */
.question-card .inline-block.rounded-full {
  transition: all 0.2s ease;
}

.question-card .inline-block.rounded-full:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

/* Search spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Highlighted search terms */
.search-highlight {
  background-color: rgba(249, 115, 22, 0.2);
  padding: 0.1em 0;
  border-radius: 2px;
}

/* Make search suggestions keyboard focusable */
/* Note: tabindex should be set in HTML, not CSS */

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Tabs scrolling container */
#tabsContainer {
  padding: 0.75rem 1.5rem; /* Increased padding for better spacing around tabs */
  position: relative;
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
  margin: 0 1rem; /* Add margin to prevent tabs from overlapping with buttons */
  scroll-behavior: smooth; /* Smooth scrolling effect */
}

#tabsContainer::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome/Safari/Webkit */
}

/* Left scrollable area gradient effect */
.category-tabs-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2.5rem;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 20;
  pointer-events: none;
}

/* Right scrollable area gradient effect */
.category-tabs-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.5rem;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 20;
  pointer-events: none;
}

/* Scroll buttons hover effects */
#tabsScrollLeft, #tabsScrollRight {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
  color: #4B5563;
  transition: all 0.3s ease;
  z-index: 40; /* Increased z-index to ensure buttons appear above other elements */
  position: absolute; /* Ensure both buttons use absolute positioning */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Center vertically */
  border: 1px solid rgba(229, 231, 235, 0.8); /* Add subtle border */
  opacity: 0; /* Start with 0 opacity */
  visibility: hidden; /* Start hidden */
}

#tabsScrollLeft svg, #tabsScrollRight svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.5;
  color: #f97316; /* Orange color for better visibility */
  transition: all 0.2s ease;
}

#tabsScrollLeft:hover svg, #tabsScrollRight:hover svg {
  transform: scale(1.1);
  color: #ea580c; /* Darker orange on hover */
}

#tabsScrollLeft:not(.hidden), 
#tabsScrollRight:not(.hidden) {
  opacity: 1;
  visibility: visible;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Left button specific positioning */
#tabsScrollLeft {
  left: -0.25rem; /* Position slightly outside to the left */
}

/* Right button specific positioning */
#tabsScrollRight {
  right: -0.25rem; /* Position slightly outside to the right */
}

/* Add hover effects to buttons */
#tabsScrollLeft:hover, #tabsScrollRight:hover {
  opacity: 1;
  background: linear-gradient(135deg, #fff4ed 0%, #fff8f4 100%);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Topics container transition */
.topics-fade-enter-active, .topics-fade-leave-active {
  transition: opacity 0.3s ease;
}

.topics-fade-enter, .topics-fade-leave-to {
  opacity: 0;
}

/* Loader animation */
.loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #f97316;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

/* Difficulty Badge Styles - Modern and Clean */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: 1px solid;
}

.difficulty-badge.bg-green-50 {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.difficulty-badge.bg-yellow-50 {
  background: #fefce8;
  color: #854d0e;
  border-color: #fde68a;
}

.difficulty-badge.bg-orange-50 {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}

.difficulty-badge.bg-red-50 {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.interview-question.expanded .difficulty-badge {
  opacity: 1;
  transform: scale(1.05);
}

/* Better focus states for accessibility */
.question-header:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: -2px;
  border-radius: 0.375rem;
}

/* Improved question container when expanded - Keep consistent */
.interview-question.expanded {
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  /* Keep border consistent */
  border-color: #e5e7eb;
  transform: translateY(-1px) scale(1.002);
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.98));
}

/* Add subtle animation to badges on hover */
.difficulty-badge,
.premium-badge {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.interview-question:hover .difficulty-badge {
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.interview-question:hover .premium-badge {
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.15);
}

/* Clean separator between questions */
.interview-question + .interview-question {
  margin-top: 1rem;
}

/* Better visual feedback for interactive elements */
.question-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.2) 20%, rgba(249, 115, 22, 0.2) 80%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.interview-question.expanded .question-header::after {
  opacity: 1;
}

/* Focus States for Accessibility - Enhanced */
.question-header:focus {
  outline: none;
}

.question-header:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: -2px;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.03) 0%, rgba(251, 146, 60, 0.02) 100%);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .interview-question {
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
  }
  
  .question-header {
    padding: 0.625rem 0.75rem; /* Reduced padding for mobile */
    min-height: 2.5rem; /* Smaller height for mobile */
  }
  
  .question-header h3 {
    font-size: 0.875rem !important;
    padding-right: 0.25rem;
  }
  
  .question-number {
    font-size: 0.75rem !important;
    min-width: 1.5rem;
    margin-right: 0.375rem;
  }
  
  .difficulty-badge,
  .premium-badge {
    font-size: 0.5rem;
    padding: 0.15rem 0.35rem;
    letter-spacing: 0.01em;
  }
  
  .toggle-icon,
  .expand-icon {
    width: 1rem;
    height: 1rem;
  }
  
  .answer-content.show > div {
    padding: 1rem 0.75rem;
  }
  
  .answer-content .prose {
    font-size: 0.875rem;
  }
  
  /* Keep subtle effects on mobile for feedback */
  @media (hover: none) {
    .interview-question:hover {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      transform: none;
    }
    
    .question-header:hover {
      background: transparent;
    }
    
    .interview-question.expanded {
      transform: none;
    }
  }
}

/* Premium Badge - Refined */
.premium-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.premium-badge svg {
  width: 0.75rem;
  height: 0.75rem;
}

.interview-question:hover .premium-badge {
  transform: scale(1.05);
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
}

/* Active/Expanded state persistence */
.interview-question.active,
.interview-question.expanded.active {
  border-color: #e5e7eb;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.98));
}

/* Loading indicator */
.pulse {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

/* AI Explanation Modal Styles - Matching Q&A Cards */
.interview-question-modal {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform-origin: center;
}

/* Modal Header - Similar to question header */
.question-header-modal {
  transition: all 0.2s ease;
  position: relative;
}

/* Modal Content Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Loading Spinner */
.border-3 {
  border-width: 3px;
}

.border-t-transparent {
  border-top-color: transparent;
}

/* AI Explanation Content Styling */
.ai-explanation-content {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
}

.ai-explanation-content p {
  margin-bottom: 1rem;
}

.ai-explanation-content h1,
.ai-explanation-content h2,
.ai-explanation-content h3,
.ai-explanation-content h4,
.ai-explanation-content h5,
.ai-explanation-content h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #1f2937;
}

.ai-explanation-content h1 { font-size: 1.5rem; }
.ai-explanation-content h2 { font-size: 1.25rem; }
.ai-explanation-content h3 { font-size: 1.125rem; }
.ai-explanation-content h4 { font-size: 1rem; }

.ai-explanation-content ul,
.ai-explanation-content ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.ai-explanation-content li {
  margin-bottom: 0.5rem;
  color: #4b5563;
}

.ai-explanation-content li::marker {
  color: #f97316;
  font-weight: 600;
}

.ai-explanation-content strong {
  font-weight: 600;
  color: #1f2937;
}

.ai-explanation-content em {
  font-style: italic;
  color: #374151;
}

/* Inline code styling */
.ai-explanation-content code:not(pre code) {
  background: rgba(249, 115, 22, 0.08);
  color: #c2410c;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Consolas', 'Monaco', monospace;
}

/* Code blocks styling */
.ai-explanation-content pre {
  background: #272822;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-explanation-content pre code {
  background: transparent;
  color: #f8f8f2;
  font-family: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0;
}

/* Blockquotes */
.ai-explanation-content blockquote {
  border-left: 4px solid #f97316;
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #6b7280;
  background: linear-gradient(to right, rgba(249, 115, 22, 0.05), transparent);
}

/* Tables */
.ai-explanation-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.875rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  overflow: hidden;
}

.ai-explanation-content th,
.ai-explanation-content td {
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.ai-explanation-content th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.ai-explanation-content tr:nth-child(even) {
  background: #f9fafb;
}

.ai-explanation-content tr:hover {
  background: #f3f4f6;
}

/* Links */
.ai-explanation-content a {
  color: #f97316;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ai-explanation-content a:hover {
  color: #ea580c;
  text-decoration: none;
}

/* Horizontal rules */
.ai-explanation-content hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 2rem 0;
}

/* Modal scrollbar styling */
.modal-content-container {
  max-height: 70vh;
  overflow-y: auto;
}

.modal-content-container::-webkit-scrollbar {
  width: 8px;
}

.modal-content-container::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 4px;
}

.modal-content-container::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.modal-content-container::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Modal backdrop blur support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Responsive adjustments for modal */
@media (max-width: 640px) {
  .interview-question-modal {
    margin: 1rem;
  }
  
  .question-header-modal {
    padding: 1rem;
  }
  
  .modal-content-container {
    max-height: 80vh;
  }
  
  .ai-explanation-content {
    font-size: 0.875rem;
  }
  
  .ai-explanation-content pre {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
}

/* Enhanced modal entrance animation */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.interview-question-modal {
  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effect for close button */
.question-header-modal button:hover {
  transform: rotate(90deg);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .dark-mode-enabled .interview-question {
    background-color: #1f2937;
    border-color: #374151;
  }
  
  .dark-mode-enabled .question-header {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border-color: #374151;
  }
  
  .dark-mode-enabled .answer-container {
    background-color: #111827;
  }
  
  .dark-mode-enabled h3,
  .dark-mode-enabled .text-gray-800 {
    color: #f3f4f6;
  }
  
  .dark-mode-enabled .text-gray-700 {
    color: #d1d5db;
  }
  
  .dark-mode-enabled .text-gray-600 {
    color: #9ca3af;
  }
}

/* Topics Container Styling */
#topicsContainer {
  /* padding: 1rem 0; */
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

/* Add a visible header to the topics section */
/* #topicsContainer::before {
  content: "Select a Topic:";
  display: block;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #e5e7eb;
} */

/* Page Title Styling */
.page-title-container {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-title-container h1 {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.page-title-container h1::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f97316;
  transform: scaleX(0.7);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.page-title-container p {
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  animation: fadeIn 1s ease 0.3s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

/* Create a smooth transition effect for opacity changes */
#topicsContainer {
  transition: opacity 0.3s ease-in-out;
}

/* Enhanced Questions Container */
#questionsContainer {
  animation: fadeInUp 0.5s ease-out;
}

/* Professional Question Interaction States */
.interview-question {
  transform-origin: center;
  will-change: transform, box-shadow;
}

.interview-question::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, transparent, rgba(249, 115, 22, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.interview-question:hover::after {
  opacity: 1;
}

/* Enhanced Answer Content Typography */
.answer-content .prose {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
}

.answer-content .prose p {
  margin-bottom: 1rem;
}

.answer-content .prose ul,
.answer-content .prose ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.answer-content .prose li {
  margin-bottom: 0.5rem;
  color: #4b5563;
}

.answer-content .prose li::marker {
  color: #f97316;
  font-size: 0.875rem;
}

.answer-content .prose strong {
  font-weight: 600;
  color: #1f2937;
}

.answer-content .prose code:not(pre code) {
  background: rgba(249, 115, 22, 0.08);
  color: #c2410c;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Consolas', 'Monaco', monospace;
}

/* Premium Content Lock Styling */
.interview-question.premium-locked .answer-content > div {
  background: linear-gradient(135deg, #fffbf7 0%, #fff7ed 100%);
  border: 2px dashed rgba(249, 115, 22, 0.2);
  text-align: center;
  padding: 2.5rem;
}

.interview-question.premium-locked .answer-content svg {
  color: rgba(249, 115, 22, 0.4);
  margin-bottom: 1rem;
}

/* Smooth Entrance Animations - Professional */
.interview-question {
  animation: questionEntrance 0.3s ease-out forwards;
  opacity: 0;
}

.interview-question:nth-child(1) { animation-delay: 0s; }
.interview-question:nth-child(2) { animation-delay: 0.03s; }
.interview-question:nth-child(3) { animation-delay: 0.06s; }
.interview-question:nth-child(4) { animation-delay: 0.09s; }
.interview-question:nth-child(5) { animation-delay: 0.12s; }
.interview-question:nth-child(n+6) { animation-delay: 0.15s; }

@keyframes questionEntrance {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Code Block Styling for Interview Questions */
.prose pre {
  background: #272822;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.prose pre code {
  background: transparent;
  color: #f8f8f2;
  font-family: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.prose :not(pre) > code {
  background-color: rgba(31, 41, 55, 0.1);
  color: #dc2626;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}

/* Override any conflicting Prism styles */
.answer-content pre[class*="language-"] {
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.answer-content code[class*="language-"] {
  font-size: 0.875rem;
}

/* Ensure proper spacing for answer content */
.answer-content {
  line-height: 1.7;
}

.answer-content p {
  margin-bottom: 1rem;
}

.answer-content ul,
.answer-content ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.answer-content li {
  margin-bottom: 0.5rem;
}

.answer-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.answer-content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #374151;
}

/* Add nice fade-in animation for topics */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.topics-fade-enter-active {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Add subtle hover effect for categories container */
#tabsContainer {
  position: relative;
}

#tabsContainer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(229, 231, 235, 0) 0%, 
    rgba(229, 231, 235, 1) 20%, 
    rgba(229, 231, 235, 1) 80%, 
    rgba(229, 231, 235, 0) 100%);
}

/* Add subtle shadow to indicate scroll availability */
#tabsContainer::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.9) 100%);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#tabsContainer.has-overflow::before {
  opacity: 1;
}

/* Improve spacing and layout for topics container */
#topicsContainer .flex.flex-wrap {
  gap: 0.5rem;
  padding: 0.5rem 0;
}

/* Add subtle animation to selected topic */
.topic-pill.selected-topic {
  animation: subtle-pulse 2s infinite;
}

@keyframes subtle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.3);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(255, 107, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}

/* Add a subtle indicator to topics container when empty */
#topicsContainer:empty::before {
  content: 'Select a category to view topics';
  display: block;
  text-align: center;
  color: #9CA3AF;
  padding: 2rem 0;
  font-style: italic;
}

/* Add these styles to enhance the professional look */

/* Add a subtle heading for the topics section */
#topicsContainer {
  position: relative;
  /* padding-top: 1.75rem; */
}

/* #topicsContainer::before {
  content: 'Topics';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6B7280;
  letter-spacing: 0.025em;
}
 */
/* Create a clean container for topics */
#topicsContainer .flex.flex-wrap {
  background-color: #F9FAFB;
  border-radius: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #E5E7EB;
}

/* Enhance tab container appearance */
#tabsContainer {
  border-bottom: 1px solid #E5E7EB;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(249, 250, 251, 0.8) 100%);
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem; /* Negative margin to extend background */
  padding-left: 2.5rem; /* Add extra padding on the left for the left button */
  padding-right: 2.5rem; /* Add extra padding on the right for the right button */
  scroll-padding-left: 2.5rem; /* Ensure scrolling keeps content away from the left button */
  scroll-padding-right: 2.5rem; /* Ensure scrolling keeps content away from the right button */
  position: relative; /* Ensure the tabsContainer acts as a positioning context */
}

/* Create a container effect around the tabs */
.category-tabs-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  background-color: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.7);
}

/* Add a slight gradient background to the active tab */
.category-tab.active {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.08) 0%, 
    rgba(255, 107, 53, 0.12) 100%);
}

/* Add subtle card effect to topic pills on hover */
.topic-pill:hover {
  transform: translateY(-2px);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Springy effect */
}

/* Enhance the scroll buttons with a subtle background effect */
#tabsScrollLeft, #tabsScrollRight {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  opacity: 0.9;
  z-index: 30; /* Increased z-index to ensure buttons appear above other elements */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Center vertically */
}

/* Adjust the container that holds the scrolling functionality */
#tabsContainer {
  padding: 0 1rem; /* Add padding to prevent content from being hidden by buttons */
  position: relative;
  overflow-x: auto;
}

/* Apply Inter font to sidebar elements */
#categorySidebar input,
#categorySidebar .text-xs,
#categorySidebar span {
  font-family: 'Inter var', sans-serif;
}

/* Ensure font consistency in the sidebar header */
#categorySidebar h3 {
  font-family: 'Inter var', sans-serif;
}

/* Ensure group items and all their child elements use the Inter font */
.group-item,
.group-item span,
.group-item div,
.group-item * {
  font-family: 'Inter var', sans-serif;
}

/* Ensure the topic count badges in the sidebar use the correct font */
.group-item .text-xs.text-gray-500.bg-gray-100 {
  font-family: 'Inter var', sans-serif;
}

/* Remove the dot indicator */
.group-item::after {
  display: none;
}

.group-item:hover::after {
  display: none;
}

.group-item.active-group::after {
  display: none;
}

/* Enhance sidebar category dividers */
#categorySidebar .px-4.py-2.text-xs.font-medium.text-gray-600 {
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#categorySidebar .px-4.py-2.text-xs.font-medium.text-gray-600::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: linear-gradient(to right, rgba(249, 250, 251, 0), rgba(249, 250, 251, 1));
  pointer-events: none;
}

/* Enhance sidebar icons */
.sidebar-icon {
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.group-item:hover .sidebar-icon {
  transform: translateX(2px);
  color: #ea580c;
  filter: drop-shadow(0 1px 1px rgba(234, 88, 12, 0.3));
}

.group-item.active-group .sidebar-icon {
  color: #ea580c;
  filter: drop-shadow(0 1px 1px rgba(234, 88, 12, 0.3));
}

/* Enhance category sidebar with subtle pattern */
#categorySidebar {
  background-image: 
    radial-gradient(circle at 100% 100%, rgba(249, 250, 251, 0.4) 0%, transparent 0.5%),
    radial-gradient(circle at 0% 0%, rgba(249, 250, 251, 0.4) 0%, transparent 0.5%),
    linear-gradient(to bottom, #ffffff, #fafafa);
  background-attachment: fixed;
}

/* Add a hint of depth to the sidebar border */
#categorySidebar {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 
    0 2px 4px -1px rgba(0, 0, 0, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  border-color: rgba(229, 231, 235, 0.8);
}

/* Enhance topic count badges in sidebar */
.group-item .text-xs.text-gray-500.bg-gray-100 {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.group-item .text-xs.text-gray-500.bg-gray-100::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0));
  z-index: -1;
}

/* Subtle spacing and alignment enhancements */
.group-item:not(:last-child) {
  margin-bottom: 1px;
}

/* When there's no category divider right before an item */
.group-item:not(.px-4.py-2.text-xs.font-medium.text-gray-600 + .group-item) {
  border-top: 1px solid rgba(229, 231, 235, 0.4);
}

/* Select a topic message styling */
#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm {
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
  border-color: #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  animation: fadeInUp 0.5s ease-out;
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm svg {
  transition: all 0.3s ease;
  color: #9ca3af;
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm:hover svg {
  transform: scale(1.05);
  color: #f97316;
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm h3 {
  font-weight: 600;
  transition: color 0.3s ease;
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm:hover h3 {
  color: #f97316;
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm p {
  transition: color 0.3s ease;
}

#questionsContainer .bg-white.rounded-lg.border.p-8.text-center.shadow-sm:hover p {
  color: #4b5563;
} 

/* Markdown Table Styling */
.markdown-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.markdown-table th,
.markdown-table td {
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  vertical-align: top;
}

.markdown-table th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.markdown-table tr:nth-child(even) {
  background-color: #f9fafb;
}

.markdown-table tr:hover {
  background-color: #f3f4f6;
}

.markdown-table td {
  color: #4b5563;
  line-height: 1.5;
}

/* Responsive table */
@media (max-width: 768px) {
  .markdown-table {
    font-size: 12px;
  }
  
  .markdown-table th,
  .markdown-table td {
    padding: 8px 12px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .markdown-table {
    background-color: #1f2937;
    color: #f9fafb;
  }
  
  .markdown-table th {
    background-color: #374151;
    color: #f9fafb;
  }
  
  .markdown-table th,
  .markdown-table td {
    border-color: #4b5563;
  }
  
  .markdown-table tr:nth-child(even) {
    background-color: #374151;
  }
  
  .markdown-table tr:hover {
    background-color: #4b5563;
  }
  
  .markdown-table td {
    color: #d1d5db;
  }
}