body { font-family: system-ui, sans-serif; background-image: url('background.png'); color:#e2e8f0; margin:0; }
.app { max-width: 80%; margin: 0 auto; padding: 16px; }
h1 { font-size: 20px; margin-bottom: 10px; }
.chat { background:transparent; border:1px solid #1f2937; border-radius:8px; padding:12px; height: 70vh; overflow:auto; }
.msg { margin: 8px 0; display:flex; gap:8px; }
.msg .role { font-weight: 600; min-width:80px; color:#93c5fd; }
.msg.assistant .role { color:#86efac; }
.msg .bubble { background:#0b1220; border:1px solid #1f2937; padding:8px 10px; border-radius:8px; white-space:pre-wrap; }
.form { display:flex; gap:8px; margin-top: 12px; background:#0b1220;}
.form input[type="text"] { flex:1; padding:8px; border-radius:6px; border:1px solid #1f2937; background:#0b1220; color:#e2e8f0; }
.form button { padding:8px 12px; border-radius:6px; border:1px solid #1f2937; background: green; color:white; cursor:pointer; }
.form button:disabled { opacity: 0.6; cursor: not-allowed; }
.stream-toggle { display:flex; align-items:center; gap:6px; font-size:14px; }


.msg.assistant .bubble {
  background: #A2EBA8;
  border: 1px solid #c0c8ff;
  border-radius: 8px;
  padding: 8px;
  white-space: pre-wrap;
  color: black;
  opacity: 0.8;
}

.msg.user .bubble {
  background: #A2C3EB;
  border: 1px solid #b2ffb2;
  border-radius: 8px;
  padding: 8px;
  white-space: pre-wrap;
  color: black;
  opacity: 0.8;
}

.msg.system .bubble {
  font-style: italic;
  color: #666;
}

#imageForm {
	width: 100%;
}

#imagePrompt {
	width: 80%;
	height: 30px;
}