/* Simple scrollbar styling for a more native feel */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: #d1d5db; /* gray-300 */
        border-radius: 10px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #9ca3af; /* gray-400 */
      }
      html.dark ::-webkit-scrollbar-thumb {
        background: #3f3f46; /* zinc-700 */
      }
      html, body, #root {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .markdown-content {
        line-height: 1.75;
      }
      .markdown-content p:last-child {
        margin-bottom: 0;
      }
      .markdown-content p {
        margin-bottom: 0.75rem;
      }
      .markdown-content h1, .markdown-content h2, .markdown-content h3 {
          font-weight: bold;
          margin-top: 1.25rem;
          margin-bottom: 0.75rem;
          line-height: 1.4;
      }
      .markdown-content h1 { font-size: 1.5em; }
      .markdown-content h2 { font-size: 1.25em; }
      .markdown-content h3 { font-size: 1.1em; }
      .markdown-content ul, .markdown-content ol {
          padding-inline-start: 1.75rem;
          margin-bottom: 0.75rem;
      }
      .markdown-content li {
        margin-bottom: 0.25rem;
      }
      .markdown-content ul { list-style-type: disc; }
      .markdown-content ol { list-style-type: decimal; }
      .markdown-content a {
          color: #4f46e5; /* indigo-600 */
          text-decoration: underline;
      }
      .markdown-content code {
          background-color: #e5e7eb; /* gray-200 */
          padding: 0.1rem 0.3rem;
          border-radius: 0.25rem;
      }
      html.dark .markdown-content code {
          background-color: #27272a; /* zinc-800 */
      }
      /* Animation for modals */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .animate-fade-in {
        animation: fadeIn 0.3s ease-out;
      }
      @keyframes slideInLeft {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
      }
      .animate-slide-in-left {
        animation: slideInLeft 0.3s ease-out;
      }
      @keyframes slideInRight {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
      }
      .animate-slide-in-right {
        animation: slideInRight 0.3s ease-out;
      }
      @keyframes slideInUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
      }
      .animate-slide-in-up {
        animation: slideInUp 0.3s ease-out;
      }
      /* Animation for toast */
      @keyframes toast-in {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-toast-in {
        animation: toast-in 0.3s ease-out;
      }
      /* Styles for react-image-crop */
      .ReactCrop__crop-selection {
          border: 2px dashed rgba(255, 255, 255, 0.7);
          background: rgba(0, 0, 0, 0.3);
      }
      .ReactCrop__drag-handle {
          background-color: rgba(255, 255, 255, 0.7);
          border: 1px solid rgba(0, 0, 0, 0.5);
          width: 10px;
          height: 10px;
          border-radius: 50%;
      }
      /* Custom dropdown option styling */
      select option {
        background: #ffffff;
        color: #18181b;
      }
      html.dark select option {
        background: #27272a; /* zinc-800 */
        color: #f4f4f5; /* zinc-100 */
      }