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

@layer components {
  /* Markdown-formatted question text */
  .question-text > * + * { @apply mt-2; }
  .question-text ul { @apply list-disc pl-5; }
  .question-text ol { @apply list-decimal pl-5; }
  .question-text li + li { @apply mt-1; }
  .question-text strong { @apply font-bold; }
  .question-text a { @apply underline text-purple-600; }

  /* Markdown editor: transparent textarea over a highlight layer with identical metrics */
  .markdown-editor-highlight {
    position: absolute;
    inset: 0;
    border-style: solid;
    border-color: transparent;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    @apply text-gray-900;
  }
  .markdown-editor-input {
    position: relative;
    color: transparent;
    caret-color: theme('colors.gray.900');
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  .markdown-editor-input::selection { color: transparent; background: theme('colors.purple.200 / 60%'); }
  .markdown-editor-input::placeholder { color: theme('colors.gray.400'); }
  .markdown-editor-highlight .md-syntax { @apply text-gray-400; }
  .markdown-editor-highlight .md-list-marker { @apply text-purple-600; }
  /* Fake bold/italic keep glyph widths identical so the caret stays aligned */
  .markdown-editor-highlight .md-bold { -webkit-text-stroke: 0.55px currentColor; }
  .markdown-editor-highlight .md-italic { font-style: italic; }

  /* AI Chat optimized for mobile - no body scroll */
  [data-controller="survey-taker--ai-text-question"] [data-survey-taker--ai-text-question-target="chatContainer"] {
    max-height: 60vh;
    display: flex;
    flex-direction: column;
  }

  [data-controller="survey-taker--ai-text-question"] [data-survey-taker--ai-text-question-target="chatMessages"] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}
/*
 * 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.
 *


 */