/* Fonts */
@font-face {
    font-family: "inter-regular";
    src: url("../../fonts/Inter-Regular.ttf");
}
@font-face {
    font-family: "inter-medium";
    src: url("../../fonts/Inter-Medium.ttf");
}

/* Basic reset and global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: 400 13px/16px Inter,sans-serif;
  font-size: 1rem;
  line-height: 1.4rem;
  letter-spacing: normal;
}
html, body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  color: #000;
}

/* Responsive body */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url(/assets/images/default-background.jpg);
  background-repeat: repeat;
}

/* Header */
.site-header {
  text-align: center;
  padding: 1rem 0;
  background-color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.site-header h1 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 15px;
  display: block;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main content area */
main {
  flex: 1;
  width: 90%;
  max-width: 1280px;
  margin: 75px auto 50px auto;
}

/* Messages container */
.messages {
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Styling for user and assistant messages */
.user {
  margin-bottom: 1rem;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
}

.assistant {
  margin-bottom: 1rem;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
}

/* CTA container */
.cta {
  text-align: center;
}
.cta a {
  color: #0080ff;
  text-decoration: none;
  font-weight: bold;
}
.cta a:hover {
  text-decoration: none;
}

/* Responsive typography adjustments */
@media (max-width: 600px) {
  .site-header h1 {
    font-size: 1.4rem;
  }
  main {
    width: 95%;
  }
}

/* Messages */
.messages .user>*,
.messages .assistant>*,
.messages .think>*{
  margin-bottom: 1rem;
}
.messages .user>*:last-child,
.messages .assistant>*:last-child {
  margin-bottom: 0;
}
.messages img {
  max-width: 100%;
  max-height: 400px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0,0,0,.2);
}
.messages table {
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.messages table thead tr th {
  font-weight: bold;
  text-align: left;
  border-bottom: solid 1px rgba(0,0,0,.1);
}
.messages table thead tr th,
.messages table tbody tr td {
  padding: 5px 7px;
}
.messages ol,
.messages ul {
  padding-left: 25px;
}
.messages ol ul,
.messages ul ol {
  padding-left: 10px;
}
.messages ol ul li:last-child,
.messages ul ol li:last-child {
  margin-bottom: 12px;
}
.messages blockquote {
  font-size: 1rem;
  color: #707070;
  margin: 15px 25px 15px 20px;
}
.messages pre {
  white-space: pre-wrap;
}
.messages b,
.messages strong {
  font-weight: bold;
}
.messages i,
.messages em {
  font-style: italics;
}
.messages h1 {
  font: 400 32px / 48px Inter, sans-serif;
}
.messages h2 {
  font: 500 20px / 32px Inter, sans-serif;
}
.messages h3 {
  font: 400 16px / 28px Inter, sans-serif;
}
.messages h4 {
  font: 400 15px / 24px Inter, sans-serif;
}
.messages h5 {
  font: 400 calc(13px * 0.83) / 16px Inter, sans-serif;
}
.messages h6 {
  font: 400 calc(13px * 0.67) / 16px Inter, sans-serif;
}

.messages div.think {
  font-size: 14px;
  line-height: 17px;
  border: solid 1px rgba(220,220,220);
  border-radius: 5px;
  padding: 1rem;
  background-color: #fafafa;
  margin-bottom: 1rem;
  color: #808080;
}
.mermaid svg {
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}