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

@layer components {
  /* 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.
 *


 */