.content-area {
    font-family: Arial, sans-serif !important;
    font-size: 12pt !important;
}
.content-area ul {
    list-style-type: disc !important;
    padding-left: 40px !important;
    margin: 1em 0 !important;
}
.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6 {
    font-weight: bold !important;
    font-size: 12pt !important;
}
.content-area blockquote,
.content-area dd,
.content-area dl,
.content-area figure,
.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6,
.content-area hr,
.content-area p,
.content-area pre {
    margin: revert !important;
}
/* Add specific override for tables */
.content-area table {
    font-size: 12pt !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1em 0 !important;
    font-family: Arial, sans-serif !important;
}

/* Dark mode styles */
.dark body {
    background-color: #1a1a1a;
    color: #ffffff;
}

.dark .bg-white {
    background-color: #2d2d2d;
}

.dark .bg-gray-100 {
    background-color: #1a1a1a;
}

.dark .text-gray-500 {
    color: #a3a3a3;
}

.dark .text-gray-700 {
    color: #ffffff;
}

.dark .border-gray-200 {
    border-color: #404040;
}

/* Logo dark mode adjustment */
.dark img[alt="Assessment Assist AI Logo"] {
    filter: invert(1) brightness(100%);
}

/* Text color overrides for dark mode */
.dark .text-gray-500,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900 {
    color: rgb(229, 231, 235) !important;
}

/* For light grays, make them slightly dimmer in dark mode */
.dark .text-gray-400 {
    color: rgb(156, 163, 175) !important;
}

/* For very light grays, make them even dimmer */
.dark .text-gray-300 {
    color: rgb(107, 114, 128) !important;
}

.dark .bg-gray-50 {
    background-color: rgb(31, 31, 32) !important;
}

.dark tr {
    background-color: rgb(18, 18, 18) !important;
    border-color: rgb(75, 85, 99) !important;
}

.dark tbody > tr {
    border-color: rgb(75, 85, 99) !important;
}

.dark .min-w-full.divide-y.divide-gray-200 > tbody {
    border-color: rgb(75, 85, 99) !important;
}

.dark .min-w-full.divide-y.divide-gray-200 > tbody > tr {
    border-color: rgb(75, 85, 99) !important;
}

.dark tbody.bg-white.divide-y.divide-gray-200 {
    border-color: rgb(75, 85, 99) !important;
}

.dark tbody.bg-white.divide-y.divide-gray-200 > tr {
    border-color: rgb(75, 85, 99) !important;
}

/* Ensure divide utilities use the correct color in dark mode */
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(75, 85, 99) !important;
}

.dark .bg-blue-50 {
    background-color: rgb(31, 35, 41) !important;
}

.dark .bg-blue-100 {
    background-color: rgb(31, 35, 41) !important;
}

.dark .bg-purple-100 {
    background-color: rgb(42, 40, 55) !important;
}

.dark input {
    background-color: rgb(31, 35, 41) !important;
}

/* File drop area hover styles */
.dark .hover\:border-blue-500:hover {
    border-color: rgb(59, 130, 246) !important;
}

.dark .hover\:bg-blue-50:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.dark .border {
    border-color: rgb(75, 85, 99) !important;
}

.dark div[data-rfd-droppable-id="sections"] {
    border-color: rgb(75, 85, 99) !important;
}

.dark .text-blue-800 {
    color: rgba(183, 185, 252, 0.9) !important;
}

.dark .text-purple-800 {
    color: rgba(228, 171, 252, 0.9) !important;
}

/* Token highlighting for light mode */
.token-highlight {
    background-color: rgba(59, 130, 246, 0.3);  /* brighter blue */
    padding: 0 2px;
    border-radius: 3px;
}

/* Token highlighting for dark mode */
.dark .token-highlight {
    background-color: rgba(96, 165, 250, 0.5);  /* much brighter blue for dark mode */
    padding: 0 2px;
    border-radius: 3px;
}

ul {
    list-style-position: inside;
}

ul li {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

/* Responsive video container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(79, 70, 229, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

.feedback-buttons {
  animation: pulse-border 2s infinite;
  border-radius: 9999px;
  padding: 2px;
}