@import './conversations.tailwind.css';
@import './sidebar.tailwind.css';
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  strong {
    @apply font-bold
  }

  html {
    @apply h-full
  }

  body {
    @apply bg-gray-900 text-gray-100 font-sans leading-normal tracking-normal h-full
  }

  pre {
    @apply bg-slate-900 p-5 rounded-xl overflow-x-auto
  }

  h2 {
    @apply font-bold text-2xl
  }

  h1 {
    @apply font-bold text-4xl
  }

  button {
    @apply text-white rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
  }
}

@layer components {
  strong {
    @apply font-bold
  }

  .navbar {
    @apply bg-gray-800 shadow-md sticky top-0 z-10

  }

  .navbar-container {
    @apply max-w-full mx-auto px-4 sm:px-6 lg:px-8
  }

  .navbar-sections {
    @apply flex justify-between h-16
  }

  .navbar-actions {
    @apply flex items-center space-x-4
  }

  .navbar-actions > a {
    @apply text-gray-400 hover:text-white
  }

  .navbar-header {
    @apply flex items-center
  }

  .navbar-header > a {
    @apply text-lg font-semibold text-white
  }

  .register-form {
    @apply p-5 mx-auto max-w-sm bg-gray-800 rounded-lg
  }

  .register-form h1 {
    @apply text-center
  }

  .alert {
    @apply border px-4 py-3 rounded relative
  }

  .alert.danger {
    @apply bg-red-100 border-red-400 text-red-700
  }

  .alert > span {
    @apply block sm:inline
  }

  .register-form .field_with_errors input {
    @apply border-red-500
  }

  .register-form .field_with_errors label {
    @apply text-red-500 
  }

  .register-form input {
    @apply w-full px-4 py-2 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500
  }

  .register-form input[type=submit] {
    @apply w-full my-5 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700
  }

  .secondary-action {
    @apply font-semibold leading-6 text-indigo-600 hover:text-indigo-500
  }

  form .actions {
    @apply flex w-full items-stretch
  }
  
  form {
    @apply mt-5
  }

  label {
    @apply block text-white text-sm font-bold my-2
  }

  .gravatar {
    @apply w-8 h-8 rounded-full
  }

  main {
    @apply mt-5 pb-5
  }

  .tile-grid {
    @apply grid mx-auto justify-center max-w-2xl grid-cols-1 gap-6 px-0
  }

  .tile-grid .tile {
    @apply bg-white shadow-md rounded-lg p-6
  }

  .tile-grid .tile .title {
    @apply text-xl text-gray-600 font-bold mb-2
  }

  .tile-grid .tile p {
    @apply text-gray-600
  }

  .register-form span.error-messages {
    @apply flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1
  }

  .markdown h2 {
    @apply mt-5
  }

  .markdown ul {
    @apply list-disc pl-5
  }

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

@layer components {

  .conversation .conversation-container {
    @apply mx-auto max-w-6xl
  }

  .conversation .chat-window {
    @apply my-5 bg-gray-800 shadow-lg rounded-lg overflow-hidden
  }

  .conversation .messages {
    @apply flex p-4 h-[30rem] overflow-y-scroll flex-col-reverse
  }

  .send-input {
    @apply p-4 bg-gray-700 border-t border-gray-600
  }

  .conversation .send-input form {
    @apply flex
  }

  .conversation .send-input input:not([type="submit"]) {
    @apply flex-grow px-4 py-2 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500
  }

  .conversation .send-input textarea {
    @apply flex-grow px-4 py-2 border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500
  }

  .conversation .send-input input[type=submit] {
    @apply ml-4 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700
  }

  .conversation  .message {
    @apply mb-4 flex
  }

  .conversation .message.user {
    @apply items-end justify-end
  }
  .conversation .message.ai {
    @apply items-start
  }

  .message .gravatar {
    @apply w-10 h-10 rounded-full
  }

  .message.ai .gravatar {
    @apply mr-3
  }

  .message.user .gravatar {
    @apply ml-3
  }

  .message .text {
    @apply p-3 rounded-lg inline-block max-w-2xl
  }

  .message.ai .text {
    @apply bg-gray-700 text-gray-200
  }

  .message.user .text {
    @apply bg-indigo-600 text-white
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .sidebar {
    @apply hidden mt-5 pt-16 lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col
  }

  .sidebar-container {
    @apply flex grow w-64 flex-col gap-y-5 overflow-y-auto px-6
  }

  .sidebar-container nav {
    @apply flex flex-1 flex-col
  }

  .sidebar-sections {
    @apply flex flex-1 flex-col gap-y-7
  }

  .sidebar-section {
    @apply -mx-2 space-y-1
  }

  .sidebar-section-bottom {
    @apply -mx-2 mt-auto
  }

  .sidebar-item {
    @apply flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white
  }

}
/*
 * 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.
 *


 */