html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: -apple-system, Helvetica, Arial, sans-serif;
  background: #111;
  color: #eee;
}

/* position:fixed with all insets at 0, rather than height:100vh, is used
   deliberately: iOS Safari's 100vh includes the area behind the address
   bar/toolbar, not just what's actually visible on load, which pushed the
   composer below the fold until the user scrolled. Fixed insets are
   computed against the real visible viewport instead, on every browser
   tested (old iOS WebKit and Chrome alike), with no JS required. */
#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
}

#log {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
}

.msg {
  margin-bottom: 0.75em;
  padding: 0.6em 0.9em;
  border-radius: 10px;
  max-width: 80%;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.msg-user {
  background: #262626;
  color: #eee;
  border: 1px solid #d9752a;
  margin-left: auto;
}

.msg-assistant {
  background: #262626;
  color: #eee;
  margin-right: auto;
}

.msg-failed {
  border-color: #f66;
  opacity: 0.6;
}

.status {
  min-height: 1.4em;
  padding: 0 1em;
  font-size: 0.85em;
  color: #999;
}

.status-error {
  color: #f66;
}

#composer {
  display: flex;
  padding: 1em;
  border-top: 1px solid #333;
}

#message-input {
  flex: 1;
  padding: 0.6em;
  font-size: 1em;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1a1a1a;
  color: #eee;
}

#send-btn {
  margin-left: 0.6em;
  padding: 0.6em 1.2em;
  font-size: 1em;
  border: 1px solid #d9752a;
  border-radius: 6px;
  background: #262626;
  color: #d9752a;
  cursor: pointer;
}

#send-btn:disabled {
  opacity: 0.5;
  cursor: default;
}