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

@layer components {
  /* TinyMCE Styling */
  .tox-tinymce {
    border-radius: 0.5rem !important;
  }
  
  /* Make sure the TinyMCE content area fills the available height */
  .tox-tinymce iframe {
    min-height: 100% !important;
  }
  
  /* Specific styling for content editor which should be larger */
  #document_content_ifr {
    min-height: 550px !important;
  }
  
  /* Styling for select options */
  .ts-wrapper {
    @apply w-full;
  }

  .ts-wrapper.multi {
    @apply relative;
  }

  .ts-wrapper.multi .ts-control {
    @apply flex flex-wrap gap-2 p-2 bg-white border border-gray-300 rounded-lg shadow-sm min-h-[42px];
  }

  .ts-wrapper.multi.focus .ts-control {
    @apply outline-2 outline outline-offset-2 outline-blue-500 border-blue-500;
  }

  .ts-wrapper.multi .ts-control > input {
    @apply bg-transparent border-none shadow-none outline-none p-0 m-0 text-sm flex-grow min-w-[60px];
  }

  .ts-dropdown {
    @apply absolute z-50 w-full bg-white mt-1 rounded-lg border border-gray-200 shadow-lg;
  }

  .ts-dropdown-content {
    @apply max-h-64 overflow-y-auto;
  }

  .ts-dropdown .option {
    @apply px-3 py-2 flex items-center gap-2 cursor-pointer hover:bg-blue-50;
  }

  .ts-dropdown .active {
    @apply bg-gray-100;
  }

  .ts-dropdown .create {
    @apply px-4 py-2 text-gray-500;
  }

  .ts-wrapper.multi .ts-control > div {
    @apply inline-flex items-center bg-gray-100 text-gray-900 rounded-full px-3 py-1 text-sm;
  }

  .ts-wrapper.multi .ts-control > div.active {
    @apply bg-blue-50 text-blue-700;
  }

  .ts-wrapper.plugin-remove_button .item .remove {
    @apply border-l-0 pl-1.5 text-gray-400 hover:text-gray-600;
  }

  .checkbox-container {
    @apply inline-flex items-center justify-center w-4 h-4 border rounded-sm border-gray-300;
  }

  .ts-dropdown .option.selected .checkbox-container {
    @apply bg-blue-500 border-blue-500;
  }

  .ts-hidden-accessible {
    @apply sr-only;
  }

  /* Single-select TomSelect (for prompt library) */
  .ts-wrapper.single .ts-control {
    @apply px-4 py-2.5 border border-gray-300 rounded-lg bg-white flex items-center gap-2 cursor-pointer relative;
    min-height: 44px;
  }

  .ts-wrapper.single.input-active .ts-control {
    @apply border-se-green ring-2 ring-se-green/30;
  }

  .ts-wrapper.single .ts-control > .item {
    @apply inline-flex items-center bg-se-light text-se-dark rounded-md px-3 py-1 text-sm font-medium;
    max-width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ts-wrapper.single .ts-control > input {
    @apply flex-1 border-none outline-none bg-transparent text-gray-700 placeholder-gray-400 text-sm;
    min-width: 100px;
  }

  .ts-wrapper.single .ts-control > input::placeholder {
    @apply text-gray-400;
  }

  /* Clear button for single select */
  .ts-wrapper.single .clear-button {
    @apply text-gray-400 hover:text-red-500 transition-colors ml-auto flex-shrink-0;
  }

  /* Dropdown arrow for single select */
  .ts-wrapper.single .ts-control::after {
    content: '';
    @apply absolute right-3 top-1/2 -translate-y-1/2;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #9CA3AF;
  }

  .ts-wrapper.single.has-items .ts-control::after {
    display: none;
  }

  .ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Focus state */
  .ts-wrapper.single.focus .ts-control {
    @apply border-se-green shadow-none;
  }

  /* Remove default TomSelect decorations */
  .ts-wrapper.single .ts-control {
    background-image: none;
    box-shadow: none;
  }

  /* Dropdown option styling for single select */
  .ts-wrapper.single .ts-dropdown .option {
    @apply px-4 py-2.5 cursor-pointer text-gray-700;
  }

  .ts-wrapper.single .ts-dropdown .option:hover {
    @apply bg-gray-50;
  }

  .ts-wrapper.single .ts-dropdown .option.active {
    @apply bg-se-light text-se-dark;
  }

  /* Chat AI - Markdown code blocks styling */
  .chat-pane .prose code,
  #messages-container .prose code {
    @apply bg-gray-100 text-pink-600 px-1.5 py-0.5 rounded text-xs font-mono;
  }

  .chat-pane .prose pre,
  #messages-container .prose pre {
    @apply bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto my-3;
  }

  .chat-pane .prose pre code,
  #messages-container .prose pre code {
    @apply bg-transparent text-gray-100 p-0 text-xs;
  }

  .chat-pane .prose ul,
  #messages-container .prose ul {
    @apply list-disc pl-4 my-2 space-y-1;
  }

  .chat-pane .prose ol,
  #messages-container .prose ol {
    @apply list-decimal pl-4 my-2 space-y-1;
  }

  .chat-pane .prose blockquote,
  #messages-container .prose blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 my-3;
  }

  .chat-pane .prose h1, .chat-pane .prose h2, .chat-pane .prose h3,
  #messages-container .prose h1, #messages-container .prose h2, #messages-container .prose h3 {
    @apply font-semibold text-gray-900 mt-3 mb-1;
  }

  .chat-pane .prose p,
  #messages-container .prose p {
    @apply my-1;
  }

  /* AI Edit Mode - Full Screen Layout */
  .ai-edit-container {
    height: calc(100vh - 57px); /* 57px = height of the top bar */
    display: flex;
    flex-direction: column;
  }

  .ai-edit-body {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .editor-pane {
    flex: 0 0 60%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
  }

  .chat-pane {
    flex: 0 0 40%;
    border-left: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
  }

  /* Responsive: stack on mobile */
  @media (max-width: 1024px) {
    .ai-edit-body {
      flex-direction: column;
    }

    .editor-pane,
    .chat-pane {
      flex: none;
      width: 100%;
    }

    .editor-pane {
      height: 50vh;
    }

    .chat-pane {
      height: 50vh;
      border-left: none;
      border-top: 1px solid #e2e8f0;
    }
  }
}