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

@layer components {
  /* Custom prose variants for chat messages */
  .prose-chat {
    @apply prose w-full max-w-full;
  }
  
  .prose-chat p {
    @apply my-2 leading-[23px];
  }
  
  .prose-chat ul {
    @apply my-3 list-disc pl-6;
  }
  
  .prose-chat ol {
    @apply my-3 list-decimal pl-6;
  }
  
  .prose-chat h1, .prose-chat h2, .prose-chat h3, .prose-chat h4 {
    @apply font-semibold mt-6 mb-2;
  }

  .prose-chat h2 {
    @apply text-[1.1rem] mb-4;
  }

  .prose-chat h3 {
    @apply text-[1rem];
  }
  
  .prose-chat h4 {
    @apply text-[0.9rem];
  }

  .prose-chat hr {
    @apply my-7;
  }
  
  .prose-chat pre {
    @apply my-3 p-3 bg-gray-100 rounded-md text-sm overflow-x-auto;
  }
  
  .prose-chat code {
    @apply px-1.5 py-0.5 bg-gray-100 rounded text-sm font-normal;
  }
  
  .prose-chat blockquote {
    @apply pl-4 border-l-4 border-gray-300 italic my-3;
  }
  
  .prose-chat a {
    @apply text-purple-400 hover:text-purple-300 no-underline;
  }

  .field {
    @apply mb-4;
  }

  .field label {
    @apply block text-sm font-medium text-gray-500 mb-1;
  }

  .field input[type='text'],
  .field input[type='email'],
  .field input[type='password'] {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-300 focus:ring-purple-300 sm:text-sm;
  }

  #error_explanation {
    @apply rounded-md bg-red-50 p-4 mb-6 border border-red-200;
  }

  #error_explanation h2 {
    @apply text-sm font-medium text-red-800 mb-2;
  }

  #error_explanation ul {
    @apply list-none;
  }

  #error_explanation ul li:before {
    content: '-';
    @apply mr-2;
  }

  #error_explanation ul li {
    @apply text-sm text-red-700;
  }

  .field_with_errors label {
    @apply text-red-700;
  }

  .field_with_errors input {
    @apply border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500;
  }

  .error-message {
    @apply mt-2 text-sm text-red-600;
  }

  /* Chat textarea customization */
  .chat-input-container {
    @apply transition-all duration-300 ease-in-out hover:border-purple-200 hover:ring-1 hover:ring-purple-200 hover:shadow-[0_0_20px_rgba(147,51,234,0.2)];
  }
  
  .chat-input-container textarea {
    @apply w-full border-0 focus:ring-0 focus:outline-none resize-none p-0;
  }

  .chat-input-container .form-group {
    @apply m-0 p-0 w-full;
  }

  /* Add purple border to container when focused */
  .chat-input-container.focused {
    @apply border-purple-200 ring-1 ring-purple-200 shadow-[0_0_20px_rgba(147,51,234,0.2)] transition-shadow duration-300 ease-in-out;
  }

  .hint {
    @apply mt-2 text-sm text-gray-500;
  }

  .primary-button {
    @apply rounded-lg bg-purple-400 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-400;
  }

  .danger-button {
    @apply rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
  }

  .back-link {
    @apply mt-6 inline-block text-sm text-gray-500 hover:text-gray-500;
  }

  .nav-item {
    @apply flex items-center h-[51px] text-xs font-medium rounded-full hover:bg-purple-100/50;
  }

  .nav-item-active {
    @apply bg-purple-100/50 text-gray-500 font-bold;
  }

  .nav-item-icon {
    @apply w-[23px] ml-[20px] mr-[18px];
  }

  /* Responsive sidebar utilities */
  .sidebar-toggle-button {
    @apply md:hidden flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-300;
  }

  /* Mobile nav menu */
  .mobile-nav-menu {
    @apply fixed inset-0 z-40 flex md:hidden;
  }

  .mobile-nav-backdrop {
    @apply fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity ease-in-out duration-300;
  }

  .mobile-nav-panel {
    @apply relative flex-1 flex flex-col max-w-xs w-full bg-white transition ease-in-out duration-300 transform;
  }

  .feed-item-insight {
    @apply text-[#778295] text-[14px] font-light leading-tight;
  }

  .feed-item-insight ul {
    @apply mt-[14px] flex flex-col gap-3;
  }
  .feed-item-insight ul li {
    @apply relative pl-5;
  }

  .feed-item-insight ul li::before {
    @apply content-[''] absolute left-0 top-[3px] w-3 h-3 rounded-full bg-[#FFAD5C];
  }

  .feed-item-insight ul li strong {
    @apply font-semibold;
  }

  .breadcrumbs {
    @apply flex items-center;
  }

  .breadcrumbs-item {
    @apply relative text-slate-500 truncate max-w-[220px];
  }

  .breadcrumbs-item:not(:first-child) {
    @apply pl-6;
  }

  .breadcrumbs-item:not(:first-child)::before {
    @apply content-['/'] absolute left-2 top-1/2 -translate-y-1/2;
  }

  .breadcrumbs-item a {
    @apply text-black underline underline-offset-[5px] decoration-1 decoration-slate-300;
  }

  .highlighted-text {
    @apply relative inline cursor-pointer;
    -webkit-tap-highlight-color: transparent !important;
    background-image: linear-gradient(0deg, #3a809b 0%, #3aa0b5 2px, transparent 2px, transparent 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 90% !important;
    background-position: 0 75% !important;
    visibility: visible !important;
    background-color: rgb(150, 251, 218);
  }

  /* Thinking content styles */
  .thinking-content {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: max-height 0.3s ease;
  }
  
  .thinking-content code {
    background-color: transparent;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
  }
  
  .thinking-content pre {
    overflow-x: auto;
  }
}

.pagy {
  @apply flex space-x-1 text-sm text-gray-500;
}
.pagy a:not(.gap) {
  @apply block px-[13px] py-[6px] border border-gray-300 rounded-full;
}
.pagy a:not(.gap):hover {
  @apply bg-purple-300 text-white;
}
.pagy a:not(.gap):not([href]) {
  @apply text-gray-300 bg-gray-100 cursor-default;
}
.pagy a:not(.gap).current {
  @apply text-white bg-purple-300;
}

.pagy label {
  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
}
.pagy label input {
  @apply bg-gray-100 border-none rounded-md;
}

.reader-mode-body {
  /* @apply max-w-[650px]; */
}
.reader-mode-body img {
  @apply w-full max-h-[580px] object-contain object-left;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .content-card {
    @apply mx-0 !important;
  }
  
  .content-grid {
    @apply grid-cols-1 !important;
  }
  
  .table-responsive {
    @apply block w-full overflow-x-auto;
  }
  
  .table-responsive table {
    @apply min-w-full;
  }
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.highlight-tooltip {
  @apply fixed bg-white rounded-lg shadow-lg p-2 flex gap-2 items-center z-50 border border-gray-200;
  transform: translate(-50%, -130%);
}

.highlight-tooltip-button {
  @apply p-2 rounded-full hover:bg-gray-100 transition-colors duration-200;
}

.highlight {
  position: relative;
  @apply bg-[rgb(238,224,251)]/80 cursor-pointer transition-all duration-200;
  text-decoration: none !important;
  border-radius: 0.125rem;
  color: inherit !important;
  display: inline;
  padding: 2px 0;
  margin: 0 1px;
  z-index: 5;
}

.highlight.has-note {
  @apply bg-green-200 bg-opacity-80;
}

.highlight.has-note:hover {
  @apply bg-green-300 bg-opacity-90;
}

.highlight-note-icon {
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: -8px;
  font-size: 10px;
  z-index: 6;
}

.highlight-note-form {
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.highlight-note-indicator {
  z-index: 1000;
  max-width: 300px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.highlight:hover {
  @apply bg-purple-100 bg-opacity-90;
}

/* Flash animation for duplicate highlights */
@keyframes highlight-flash {
  0%, 100% { 
    background-color: rgb(238 224 251 / 0.8);
  }
  50% { 
    background-color: rgba(255, 133, 0, 0.8); /* orange-500 */
  }
}

.highlight-flash {
  animation: highlight-flash 1s ease-in-out 3;
}

/* Make sure highlights work inside links and other elements */
a .highlight, 
strong .highlight, 
em .highlight, 
span .highlight,
.highlight a,
.highlight strong,
.highlight em,
.highlight span {
  color: inherit !important;
  text-decoration: inherit;
  font-weight: inherit;
  font-style: inherit;
}

.google-search-suggestion {
  @apply flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer;
}

.google-search-suggestion:hover {
  @apply bg-gray-100;
}

.google-search-suggestion span {
  @apply ml-3;
}

.citation-link {
  @apply bg-purple-100 bg-opacity-40 ml-[2px] mr-[1px] rounded px-1 py-0.5 text-[0.8em] no-underline relative -top-[1px] font-medium text-purple-400 transition-all duration-200 whitespace-nowrap;
}

.citation-link:hover {
  @apply bg-purple-100 bg-opacity-70 shadow-[0_0_0_1px_rgba(168,85,247,0.3)];
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Custom styles for SimpleMDE Markdown Editor */
.CodeMirror {
  border-radius: 0.375rem;
  border-color: #D1D5DB;
  min-height: 200px;
}

.CodeMirror-focused {
  border-color: #A5B4FC;
  box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.5);
}

.CodeMirror-scroll {
  height: auto !important;
}

.editor-toolbar {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border-color: #D1D5DB;
}

.editor-toolbar a {
  color: #4B5563 !important;
}

.editor-toolbar a.active, 
.editor-toolbar a:hover {
  background-color: #F3F4F6;
  border-color: #D1D5DB;
}

.editor-preview {
  background-color: #F9FAFB;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-color: #D1D5DB;
  padding: 1rem;
}

.editor-preview h1,
.editor-preview h2,
.editor-preview h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.editor-preview h1 {
  font-size: 1.5rem;
}

.editor-preview h2 {
  font-size: 1.25rem;
}

.editor-preview h3 {
  font-size: 1.125rem;
}

.editor-preview p {
  margin-bottom: 1rem;
}

.editor-preview ul,
.editor-preview ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.editor-preview li {
  margin-bottom: 0.5rem;
}

.editor-preview a {
  color: #6366F1;
  text-decoration: underline;
}

.editor-preview blockquote {
  border-left: 4px solid #D1D5DB;
  padding-left: 1rem;
  margin-left: 0;
  color: #6B7280;
}

/* Hide the SimpleMDE textarea when editor is initialized */
.CodeMirror ~ textarea {
  display: none;
}

/* Markdown Table Styles */
.markdown-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  overflow-x: auto;
  display: block;
}

.markdown-table th,
.markdown-table td {
  padding: 0.5rem;
  border: 1px solid #D7DBEC;
  text-align: left;
}

.markdown-table th {
  background-color: #F5F6FA;
  font-weight: 600;
}

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

.prose-chat table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 1rem 0;
}

.prose-chat th,
.prose-chat td {
  padding: 0.5rem;
  border: 1px solid #D7DBEC;
  text-align: left;
  word-wrap: break-word;
}

.prose-chat th {
  background-color: #F5F6FA;
  font-weight: 600;
}

.prose-chat tr:nth-child(even) {
  background-color: #F9FAFB;
}