@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  #admin label {
    @apply font-bold mb-1;
  }

  dt {
    @apply font-semibold text-sm;
  }

  dd {
    @apply text-sm mb-2;
  }

  #admin [type='text'],
  #admin [type='email'],
  #admin [type='url'],
  #admin [type='password'],
  #admin [type='number'],
  #admin [type='date'],
  #admin [type='datetime-local'],
  #admin [type='month'],
  #admin [type='search'],
  #admin [type='tel'],
  #admin [type='time'],
  #admin [type='week'],
  #admin select,
  #admin [multiple],
  #admin textarea {
    @apply w-full shadow-sm font-sans rounded border-gray-300 hover:ring-sky-600 hover:border-sky-600 focus:ring-sky-800 focus:border-sky-800 text-zinc-800;
  }

  #admin [type='checkbox'],
  #admin [type='radio'] {
    @apply rounded border-gray-300 hover:ring-sky-600 hover:border-sky-600 focus:ring-sky-800 focus:border-sky-800 text-sky-800;
  }

  #admin [type='radio'] {
    @apply rounded-full;
  }

  #admin [type='submit'].btn-submit {
    @apply rounded uppercase font-sans text-sm text-white bg-sky-600 hover:bg-sky-800 active:bg-sky-800 px-6 py-2 tracking-[0.15rem] cursor-pointer disabled:bg-gray-300 disabled:text-gray-600 disabled:italic disabled:cursor-auto whitespace-nowrap;
  }

  #admin [type="submit"].btn-submit--xs {
    @apply rounded font-sans text-xs text-white bg-sky-600 hover:bg-sky-800 active:bg-sky-800 !px-2 !py-1.5 tracking-wide cursor-pointer transform transition active:translate-y-0.5 disabled:bg-gray-300 disabled:text-gray-600 disabled:italic disabled:cursor-auto whitespace-nowrap;
  }

  #admin .btn-action--tr-xs {
    @apply absolute top-0 right-0 bg-sky-400 hover:bg-sky-500 !text-white no-underline text-sm rounded px-2 py-0.5;
  }

  #admin [type='file'] {
    @apply shadow-none text-gray-400 leading-6 file:mr-6 file:px-4 file:py-2 file:rounded file:bg-sky-600 file:text-white file:border-none hover:file:bg-sky-700 cursor-pointer;
  }

  #admin .tiptap-editor {
    @apply w-full shadow-sm font-sans rounded border border-gray-300 hover:border-sky-600 focus:border-sky-800 text-gray-700 px-2 py-3;
  }
}

@layer components {
  .btn {
    @apply border-0 cursor-pointer font-medium items-center px-3 py-1 rounded text-center text-xs uppercase whitespace-nowrap disabled:bg-gray-300 disabled:hover:bg-gray-300 disabled:border-gray-300 disabled:cursor-auto disabled:text-gray-600;
  }

  .btn-primary {
    @apply w-full rounded-md px-6 py-1.5 text-sm font-normal text-center uppercase tracking-wider text-white bg-sky-800 border-2 border-sky-800 hover:bg-sky-900 hover:border-sky-900 active:bg-sky-900 active:border-sky-900 cursor-pointer disabled:bg-sky-200 disabled:border-sky-200 disabled:text-white disabled:cursor-auto;
  }
  .btn-white {
    @apply w-full rounded-md px-6 py-1.5 text-sm font-medium text-center uppercase tracking-wider text-zinc-800 bg-white border-2 border-white hover:bg-zinc-100 hover:border-zinc-100 active:bg-zinc-200 active:border-zinc-200 cursor-pointer;
  }
  .btn-secondary {
    @apply w-full rounded-md px-6 py-1.5 text-sm font-medium text-center uppercase tracking-wider text-zinc-800 border-2 border-sky-800 hover:border-sky-900 active:border-sky-900 cursor-pointer disabled:border-sky-200 disabled:text-zinc-200 disabled:cursor-auto;
  }
  .btn-light {
    @apply w-full rounded-md px-6 py-1.5 text-sm font-medium text-center uppercase tracking-wider text-zinc-800 bg-sky-200 border-2 border-sky-200 hover:border-sky-900 active:border-sky-900 cursor-pointer disabled:border-sky-200 disabled:text-zinc-200 disabled:cursor-auto;
  }
  .btn-tertiary {
    @apply w-full px-6 py-1.5 text-sm font-medium text-center uppercase tracking-wider text-sea-500 hover:text-sea-600 cursor-pointer;
  }

  .btn-pill {
    @apply btn inline-block px-5 py-2 !rounded-full text-zinc-800 text-sm uppercase !no-underline;
  }

  .btn-pill-sm {
    @apply btn inline-block px-3 py-1 !rounded-full text-zinc-800 text-xs uppercase !no-underline;
  }

  .btn-pill--outline {
    @apply border border-zinc-500 enabled:hover:bg-sea-200;
  }

  .btn-pill--white {
    @apply bg-white border-white py-3;
  }

  .btn-pill--zinc-light {
    @apply bg-zinc-300 border-zinc-400 hover:bg-zinc-400 py-3 hover:!text-white;
  }

  .btn-pill--zinc-medium {
    @apply bg-zinc-500 border-zinc-600 hover:bg-zinc-600 !text-white py-3;
  }

  .btn-pill--zinc {
    @apply bg-zinc-700 border-zinc-800 hover:bg-zinc-800 !text-white py-3;
  }

  .btn-pill--sky-800 {
    @apply bg-sky-800 border-sky-800 text-white;
  }

  .btn-pill--primary {
    @apply bg-sky-200 border-sky-200 hover:bg-sky-300;
  }

  .btn-pill--secondary {
    @apply bg-emerald-200 border-emerald-200 hover:bg-emerald-300;
  }

  .btn-pill--yellow {
    @apply bg-yellow-200 border-yellow-200 hover:bg-yellow-300;
  }

  .btn-pill--orange {
    @apply bg-orange-200 border-orange-200 hover:bg-orange-300;
  }

  .btn-pill--sky-outline {
    @apply border bg-sky-200 border-sky-500 hover:bg-sky-300 !no-underline;
  }

  .btn-pill--sky {
    @apply bg-sky-200 border-sky-200 hover:bg-sky-300 !no-underline;
  }

  .btn-pill--warning {
    @apply bg-amber-200 border-amber-200 hover:bg-amber-300 !no-underline;
  }

  .btn-pill--red {
    @apply bg-red-800 border-zinc-800 hover:bg-zinc-800 !text-white py-3;
  }

  .btn-pill--danger {
    @apply bg-red-200 border-red-300 hover:bg-red-300 !no-underline;
  }

  .btn-pill--green {
    @apply bg-green-200 border-green-300 hover:bg-green-300 !no-underline !text-black;
  }

  .btn-pill--sm {
    @apply px-3 py-2 !rounded-full text-xs;
  }

  .btn-pill--xs {
    @apply px-2 py-1.5 !rounded-full text-xs;
  }

  /*Use it for ai operation */
  .btn-slim--zinc {
    @apply !no-underline text-zinc-900 hover:text-white border border-zinc-700 hover:bg-zinc-900 focus:ring-4 focus:outline-none focus:ring-zinc-300 font-medium rounded-lg text-sm px-5 py-0.5 text-center me-2;
  }

  /*Use it for source */
  .btn-slim--green {
    @apply !no-underline text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-0.5 text-center me-2;
  }

  /*Use it for pdf */
  .btn-slim--purple {
    @apply !no-underline text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-0.5 text-center me-2;
  }

  .citation {
    @apply bg-zinc-200 text-zinc-600 px-2 py-1 rounded-full text-xs underline hover:bg-zinc-300 hover:text-zinc-800 max-w-40 truncate;
  }
  
  /* Knowledge Graph Visualization Styles */
  .knowledge-graph-filters,
  .graph-controls {
    @apply relative z-50;
  }

  #knowledge-graph-container {
    @apply relative z-10;
  }

  .graph-tooltip {
    @apply z-20 !important;
  }

  /* PDF Snippet Selection Styles */
  .pdf-page-image {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
  }
  
  /* Disable text selection on PDF viewer to prevent interference with custom selection */
  .pdf-viewer-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .pdf-page {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .invisible-text-layer {
    @apply absolute inset-0 pointer-events-auto z-10;
    /* Disable browser text selection - use marquee selection instead */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    background-color: transparent;
  }

  .text-block {
    @apply absolute pointer-events-none overflow-hidden;
    /* Optimized for marquee selection - no browser text selection */
    font-size: 8px !important;
    font-family: monospace;
    color: rgba(0, 0, 0, 0.01) !important;
    white-space: pre !important;
    cursor: default;
    /* Ensure text blocks don't interfere with marquee selection */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    /* Ensure proper rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: normal;
    display: block;
    text-indent: 0;
    letter-spacing: normal;
    word-spacing: normal;
  }

  .text-selection-highlight {
    @apply absolute pointer-events-none;
    background-color: rgba(255, 235, 59, 0.25);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(255, 193, 7, 0.1);
    animation: selection-pulse 0.3s ease-in-out;
    z-index: 4; /* Selection highlights above snippet highlights */
  }



  .snippet-highlight-temp {
    background-color: rgba(255, 193, 7, 0.35) !important;
    border-color: rgba(255, 193, 7, 0.7) !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
    animation: snippet-flash 2s ease-in-out;
  }

  .snippet-highlight-active {
    background-color: rgba(255, 193, 7, 0.35) !important;
    border-color: rgba(255, 193, 7, 0.7) !important;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.2);
  }

  .snippets-sidebar {
    @apply min-h-96;
    max-height: calc(100vh - 200px);
  }

  .snippet-item:hover .highlight-snippet {
    background-color: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.6);
  }

  /* Selected snippet styling */
  .snippet-item.selected {
    @apply bg-blue-50 border-blue-400;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.2);
    border-width: 2px;
  }

  .snippet-item.selected:hover {
    @apply bg-blue-100;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
  }

  /* Overlap indication styling */
  .highlight-overlap {
    @apply absolute pointer-events-none;
    background-color: rgba(245, 101, 101, 0.25);
    border: 2px solid rgba(239, 68, 68, 0.6);
    border-radius: 6px;
    padding: 1px 2px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
  }

  /* Page input field styling */
  input[data-pdf-highlighter-target="currentPageInput"],
  input[data-pdf-snippet-target="currentPageInput"] {
    /* Remove spinner arrows in webkit browsers */
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
  }

  input[data-pdf-highlighter-target="currentPageInput"]::-webkit-outer-spin-button,
  input[data-pdf-highlighter-target="currentPageInput"]::-webkit-inner-spin-button,
  input[data-pdf-snippet-target="currentPageInput"]::-webkit-outer-spin-button,
  input[data-pdf-snippet-target="currentPageInput"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Highlight Classes for JavaScript Use */
  /* Z-index layering system:
   * z-index 2: Base snippet highlights (green, inactive)
   * z-index 3: Active snippet highlights (green, active/darker)
   * z-index 4: Selection highlights (yellow marquee)
   * z-index 5-15: Search highlights (blue, various states)
   */
  .highlight-selection {
    @apply absolute pointer-events-none;
    background-color: rgba(255, 235, 59, 0.25);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 6px;
    padding: 1px 2px;
    box-shadow: 0 1px 3px rgba(255, 193, 7, 0.1);
    z-index: 4; /* Selection highlights above snippet highlights */
  }

  .highlight-snippet {
    @apply absolute pointer-events-none;
    background-color: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    padding: 1px 2px;
    z-index: 2; /* Base layer for snippet highlights */
  }

  .highlight-snippet-active {
    @apply absolute pointer-events-none;
    background-color: rgba(34, 197, 94, 0.35);
    border: 2px solid rgba(22, 163, 74, 0.8);
    border-radius: 6px;
    padding: 1px 2px;
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.3);
    z-index: 3; /* Active snippet layer */
  }

  /* Debug Text Block Styling */
  .text-block-debug {
    background-color: rgba(0, 255, 0, 0.2) !important;
    border: 1px solid rgba(0, 255, 0, 0.5) !important;
    color: rgba(0, 0, 0, 0.3) !important;
  }

  .text-block-debug-enhanced {
    background-color: rgba(0, 255, 0, 0.3) !important;
    border: 2px solid rgba(0, 255, 0, 0.8) !important;
    color: rgba(0, 0, 0, 0.8) !important;
  }

  @keyframes selection-pulse {
    0% { 
      background-color: rgba(255, 235, 59, 0.1);
      border-color: rgba(255, 193, 7, 0.2);
      transform: scale(0.98);
    }
    100% { 
      background-color: rgba(255, 235, 59, 0.25);
      border-color: rgba(255, 193, 7, 0.4);
      transform: scale(1);
    }
  }

  @keyframes snippet-flash {
    0%, 100% { 
      background-color: rgba(34, 197, 94, 0.2);
      border-color: rgba(34, 197, 94, 0.4);
      box-shadow: none;
      transform: scale(1);
    }
    15%, 85% { 
      background-color: rgba(255, 193, 7, 0.35);
      border-color: rgba(255, 193, 7, 0.7);
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
      transform: scale(1.02);
    }
    50% { 
      background-color: rgba(255, 193, 7, 0.45);
      border-color: rgba(255, 193, 7, 0.8);
      box-shadow: 0 0 12px rgba(255, 193, 7, 0.5);
      transform: scale(1.03);
    }
  }

  /* Marquee Selection Styles */
  .marquee-selecting {
    cursor: crosshair !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  .marquee-selecting * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  .marquee-selection {
    position: fixed;
    border: 2px dashed rgba(255, 193, 7, 0.6);
    background-color: rgba(255, 235, 59, 0.08);
    pointer-events: none;
    z-index: 1000;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.15);
    animation: marquee-pulse 0.3s ease-in-out;
  }

  @keyframes marquee-pulse {
    0% { 
      border-color: rgba(255, 193, 7, 0.3);
      background-color: rgba(255, 235, 59, 0.03);
    }
    100% { 
      border-color: rgba(255, 193, 7, 0.6);
      background-color: rgba(255, 235, 59, 0.08);
    }
  }

  /* Search Highlight Classes for PDF Viewer */
  .text-highlight {
    @apply absolute pointer-events-none transition-all duration-200;
    border-radius: 6px;
    padding: 1px 2px;
  }

  /* Line-level highlights (base layer) - very light blue for search results */
  .text-highlight.line-highlight {
    background-color: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.03);
  }

  /* Word-level highlights (within lines) - slightly more visible blue */
  .text-highlight.word-highlight {
    background-color: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.05);
    z-index: 5;
  }

  /* Current match highlighting - more visible blue but still readable */
  .text-highlight.line-highlight.current-match {
    background-color: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    z-index: 10;
    animation: current-match-pulse 0.6s ease-in-out;
  }

  .text-highlight.word-highlight.current-match {
    background-color: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    z-index: 15;
    animation: current-match-pulse 0.6s ease-in-out;
  }

  @keyframes current-match-pulse {
    0% { 
      transform: scale(1);
    }
    100% { 
      transform: scale(1.02);
    }
  }

  /* PDF Viewer Specific Styles */
  .pdf-viewer-container {
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid #ddd;
  }

  .pdf-page {
    position: relative;
  }

  .pdf-page.hidden {
    display: none;
  }

  .highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .text-box {
    position: absolute;
    border: 1px solid blue;
    background-color: rgba(0, 0, 255, 0.1);
    pointer-events: none;
  }

  .pdf-image-spinner {
    min-height: 400px;
    border-radius: 4px;
    backdrop-filter: blur(2px);
  }

  /* Agent Chat Session Layout Modes */
  /* Base styles for chat session container */
  .chat-session {
    @apply h-full w-full flex flex-col;
  }

  /* Sidebar mode: narrow, fixed positioning for right sidebar */
  .chat-session[data-layout="sidebar"] {
    @apply fixed max-w-96 lg:max-w-128 p-2 border-l border-dashed border-zinc-200;
  }

  /* Full-page mode: wide, centered for main content area */
  .chat-session[data-layout="full"] {
    @apply max-w-5xl mx-auto p-4;
  }

  /* Hide/show maximize and minimize buttons based on layout */
  .chat-session[data-layout="sidebar"] .minimize-btn {
    @apply hidden;
  }

  .chat-session[data-layout="full"] .maximize-btn {
    @apply hidden;
  }
}

@layer utilities {
  .marker-none::marker {
    content: "";
  }

  .marker-none::-webkit-details-marker {
    display: none;
  }

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

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

/* Pagy styles */

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
}

.pagy a {
  @apply !no-underline !text-black;
}

.pagy a:not(.gap) {
  @apply block rounded-lg px-3 py-1 bg-gray-200;
}

.pagy a:not(.gap):hover {
  @apply bg-gray-300;
}

.pagy a:not(.gap):not([href]) {
  /* disabled links */
  @apply text-gray-300 bg-gray-100 cursor-default;
}

.pagy a.current {
  @apply !text-white !bg-gray-400;
}

.pagy label {
  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-1 py-0.5;
}

.pagy label input {
  @apply bg-gray-100 border-none rounded-md;
}

/* Tom Select overrides */

.ts-dropdown .optgroup-header {
  @apply font-semibold !bg-slate-200 italic;
}

.ts-wrapper .ts-control {
  @apply w-full rounded p-1 leading-6 shadow-sm font-sans border-gray-300 hover:ring-gray-400 hover:border-gray-400 focus:ring-gray-400 focus:border-gray-400 text-black placeholder-gray-300;
}

.ts-dropdown {
  z-index: 25 !important;
}

.ts-wrapper {
  @apply !p-0 !m-0 !border-none;
}

.ts-control {
  min-height: 42px;
}

.ts-wrapper.multi .ts-control>div {
  @apply !bg-slate-300 rounded;
}

.ts-wrapper>.ts-control>input {
  padding-left: 10px !important;
}

.turbo-progress-bar {
  /* @apply bg-white; */
  @apply bg-gradient-to-r from-white to-sky-700;
}

.vis-labelset .vis-label {
  @apply text-xs font-bold truncate;
}

.vis-item-content {
  @apply cursor-pointer;
}

.vis-timeline {
  border: none !important;
}

a {
  @apply text-sky-600 underline;
}

a:hover {
  @apply text-sky-700 underline;
}

[data-controller="tom-select"] {
  max-height: 42px;
}

.vis-item {
  @apply rounded-lg text-xs border-2 pr-0.5 drop-shadow;
}

.vis-item .vis-item-content {
  @apply max-w-60 truncate;
}

p {
  @apply pb-2;
}

p:last {
  @apply pb-0;
}

.radio-cards-wrapper {
  @apply flex flex-wrap flex-row gap-2 my-2;
}

.radio-cards-control label {
  margin: 0px;
  height: 100%;
  cursor: pointer;
  padding: 0px;
  font-weight: 400;
}

.radio-cards-control input[type='radio'],
.radio-cards-control input[type='checkbox'] {
  display: none;
}

.radio-cards-control label .card {
  @apply border border-transparent;
  margin: 1px;
}

.radio-cards-control label .card:hover {
  @apply border border-gray-300;
}

.radio-cards-control:has(input:checked) label .card {
  @apply border shadow border-gray-600;
}

/* Dropzone */

.dropzone {
  @apply !border-2 !rounded-2xl !border-gray-400 !border-dashed !py-0 !min-h-0 bg-white/40 backdrop-blur;
}

.dz-drag-hover {
  @apply !border-2 !rounded-2xl !border-purple-400 !border-dashed !bg-slate-200 !border-slate-600;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.9;
}

.dz-drag-hover .dz-label {
  @apply border-2 rounded-2xl border-purple-400 border-dashed text-slate-400 font-bold text-xl bg-slate-600/75 z-50 absolute inset-4 justify-center items-center flex;
  pointer-events: none;
  height: calc(100vh - 2rem)
}

.dropzone.input {
  @apply appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight;
}

.dropzone.input:focus {
  @apply outline-none bg-white border-gray-400;
}

.dropzone.label {
  @apply block text-gray-700 text-sm font-bold mb-2;
}

.dropzone.select {
  @apply appearance-none py-3 px-4 pr-8 block w-full bg-gray-100 border border-gray-300 text-gray-700 rounded leading-tight;
  -webkit-appearance: none;
}

.dropzone.select:focus {
  @apply outline-none bg-white border-gray-400;
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  /* the above doesn't seem to work in Edge */
}

.ProseMirror [contenteditable="false"] {
  white-space: normal;
}

.ProseMirror [contenteditable="false"] [contenteditable="true"] {
  white-space: pre-wrap;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
  margin: 0;
}

.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.ProseMirror-hideselection * {
  caret-color: transparent;
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0
}

.breadcrumb-wrapper {
  @apply flex m-2;
}

.breadcrumb {
  @apply inline-flex flex-col sm:flex-row items-start sm:items-center space-x-1 md:space-x-3;
}

.breadcrumb-item {
  @apply items-center pl-4;
  background: var(--bs-breadcrumb-divider) 0 50% no-repeat;
}

.breadcrumb-item:first-child {
  @apply bg-none;
}

.breadcrumb-item a {
  @apply underline;
}

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

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.email-body-preview {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 2);
}

.check_boxes,
.radio_buttons {
  @apply flex flex-row flex-wrap items-start gap-x-3 gap-y-1;
}

.check_boxes fieldset,
.radio_buttons fieldset {
  @apply flex flex-wrap h-full;
}

.check_boxes .custom-control,
.radio_buttons .custom-control {
  @apply my-1;
}

.check_boxes .custom-control label,
.radio_buttons .custom-control label {
  @apply font-normal m-0 p-0 h-full cursor-pointer;
}

.check_boxes .custom-control input[type='checkbox'],
.radio_buttons .custom-control input[type='radio'] {
  @apply hidden;
}

.check_boxes .custom-control label div:hover,
.radio_buttons .custom-control label div:hover {
  @apply opacity-70;
}

.check_boxes .custom-control:has(input:checked) label div,
.radio_buttons .custom-control:has(input:checked) label div {
  @apply border-gray-600 bg-indigo-300;
}

.folder-view-mode-compact .folder-compact-mode-hidden {
  @apply hidden;
}

/* Loading Ellipsis */
.loading-ellipsis,
.loading-ellipsis div {
    box-sizing: border-box;
}
.loading-ellipsis {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
}
.loading-ellipsis div {
    position: absolute;
    top: 8.33px;
    width: 3.33px;
    height: 3.33px;
    border-radius: 50%;
    background: currentColor;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-ellipsis div:nth-child(1) {
    left: 2px;
    animation: loading-ellipsis1 0.6s infinite;
}
.loading-ellipsis div:nth-child(2) {
    left: 2px;
    animation: loading-ellipsis2 0.6s infinite;
}
.loading-ellipsis div:nth-child(3) {
    left: 8px;
    animation: loading-ellipsis2 0.6s infinite;
}
.loading-ellipsis div:nth-child(4) {
    left: 14px;
    animation: loading-ellipsis3 0.6s infinite;
}
@keyframes loading-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes loading-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes loading-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(6px, 0);
    }
}