/*
 * 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.
 *
 *= require_tree .
 *= require_self
 */
html {
  font-size: 16px
}

html.dark {
  color-scheme: dark;
}

.clickable-region {
  position: relative;
}

.region-link::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.message {
  color: #e3e2e0;
}

/* .message p {
  font-size: 16px !important;
  line-height: 24px !important;
} */
/* not last p */
.message p:not(:last-child) {
  margin-bottom: 20px !important;
}

.message ul {
  /* conventional list style */
  list-style: disc;
}

.message ul li {
  font-size: 16px !important;
  line-height: 28px !important;
  margin-bottom: 20px !important;
}

.message ol {
  /* conventional list style, indented */
  list-style: decimal;
}

.message ol li {
  font-size: 16px !important;
  line-height: 28px !important;
  margin-bottom: 20px !important;
}

.message.assistant {
  background-color: rgb(75 85 99);
}

.message.settings {
  background-color: rgb(94, 63, 63);
}

.message.user {
  background-color: rgb(55 65 81)
}

.message h1 {
  font-size: 2em;
  font-weight: bold;
}
.message h2 {
  font-size: 1.5em;
  font-weight: bold;
}
.message h3 {
  font-size: 1.17em;
  font-weight: bold;
}
.message h4 {
  font-size: 1em;
  font-weight: bold;
}
.message h5 {
  font-size: 0.83em;
  font-weight: bold;
}
.message h6 {
  font-size: 0.67em;
  font-weight: bold;
}

.message em {
  font-style: italic;
}

.message strong {
  font-weight: bold;
}

.message s {
  text-decoration: line-through;
}

.message ul {
  list-style-type: disc;
}
.message ol {
  list-style-type: decimal;
}
.message li {
  margin-left: 2em;
}

.message a {
  text-decoration: underline;
}

.message img {
  max-width: 100%;
  height: auto;
}

/* Code */
.message code {
  font-family: monospace;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.message pre {
  /* TODO: Add syntax highlighting like til.magmalabs.io has */
  overflow-x: auto;
  max-width: 100%;
  font-size: 14px;
  font-family: monospace;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 3px;
  background-color: rgb(31 41 55);
}

/* Blockquotes */
.message blockquote {
  border-left: 4px solid #ddd;
  margin: 0 0 1em;
  padding: 0.5em 0.5em 0.5em 1em;
}

/* Tables */
.message table {
  border-collapse: collapse;
  margin-bottom: 1em;
  width: 100%;
}

.message th, td {
  border: 1px solid #ddd;
  padding: 0.5em;
  text-align: left;
}
.message th {
  background-color: #f8f8f8;
  font-weight: bold;
}

.voiceshake {
  animation: kfVoiceshake 0.5s ease-in-out infinite;
}

@keyframes kfVoiceshake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
