lite-ai-chat/src/main_style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: auto;
}

.header {
    background-color: #eee;
    color: black;
    padding: 20px;
}

.header p {
    font-size: 1.1em;
}

.chat-container {
    flex: 1;
    max-height: 600px;
    padding: 20px;
    overflow-y: auto;
    background-color: white;
}

.system-prompt-container {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;
    max-width: 100%;
    display: flex;
}
.system-prompt-box {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
    outline: none;
    width: 80%;
}

.message {
    margin-bottom: 20px;
    padding: 0.4rem;
    border-radius: 10px;
    max-width: 100%;
    padding: 5px 17px;
}

.user-message {
    background-color: #eee;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 50%;
    margin-left: auto;
}

.ai-message {
    background-color: #eee;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 80%;
}

.input-container {
    background-color: white;
    padding: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
}

.input-box {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
    outline: none;
}

.button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

#model-selector {
    background-color: white;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
}

body figcaption {
  color: #666
}

html {
  height: 100%
}

@font-face {
  font-family: "sans-chinese";
  src: local("WenQuanYi Micro Hei"), local("PingFang SC"), local("Noto Sans SC"), local("Noto Sans CJK SC"), local("Source Han Sans CN"), local("Microsoft YaHei"), local("PingFang TC"), local("Noto Sans TC"), local("Noto Sans CJK TC"), local("Source Han Sans TW"), local("Microsoft JhengHei"), local("sans-serif");
  unicode-range: U+2000-FFFF
}

body {
  line-height: 1.3;
}

.post-meta {
  text-align: right;
}

li {
  margin: 1rem 2rem;
}

p,h1,h2,h3,h4,h5,h6 {
  margin: 0.7em 0;
}

*:target {
  background: yellow
}

pre {
  background-color: black; 
  color: white;
  border-radius: 0.5em;
  padding: 1em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", sans-chinese, monospace;
  overflow-x: auto;
}

table {
  width: 100%
}

table,
th,
td {
  border: thin solid black;
  border-collapse: collapse;
  padding: 0.4rem
}

code:not(pre>code) {
  padding: 0.1em 0.2em;
  font-size: 100%
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", sans-chinese, monospace;
  color: white;
}

.think {
  font-style: small;
  color: #aaa;
  margin: 0.5em 0;
}

code:not(pre>code) {
  background-color: white;
  color: red;
  border-radius: 0.5em;
  padding: 0.1em;
}