* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f1419;
  color: #e6edf3;
  min-height: 100vh;
  padding: 1rem;
}

#app {
  max-width: 1080px;
  margin: 0 auto;
}

#loading {
  color: #8b949e;
}

#loading.hidden,
#error.hidden,
#content.hidden {
  display: none;
}

#error {
  color: #f85149;
}

/* Shared format for topic heading and header link */
#topic,
#header .header-link {
  font-size: 1.25rem;
  font-weight: 600;
  color: #c9d1d9;
}

#topic {
  margin-bottom: 1rem;
}

#topic:empty::before {
  content: "Shared conversation";
}

#header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#header .header-logo {
  flex-shrink: 0;
  display: block;
}

#header .header-logo img {
  display: block;
  height: 40px;
  width: auto;
}

#header .header-link {
  flex-shrink: 0;
  white-space: normal;
  text-decoration: underline;
}

#messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.message {
  max-width: min(42rem, 88%);
  width: fit-content;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.message.user {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
  background: #00322b;
  border-right: 3px solid #238636;
}

.message.ai {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
  background: #003a12;
  border-left: 3px solid #2ea043;
}

.message .meta {
  font-size: 0.75rem;
  color: #8b949e;
  margin-bottom: 0.25rem;
}

.message .tool-calls {
  font-size: 0.85rem;
  color: #8b949e;
  margin-top: 0.5rem;
}

.message .tool-calls span {
  display: inline-block;
  background: #21262d;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.message .message-body {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.message .message-body p:first-child { margin-top: 0; }
.message .message-body p:last-child { margin-bottom: 0; }
.message .message-body pre { background: #21262d; padding: 0.5rem; border-radius: 4px; max-width: 100%; overflow-x: auto; margin: 0.5rem 0; }
.message .message-body code { background: #21262d; padding: 0.15em 0.35em; border-radius: 4px; font-size: 0.9em; }
.message .message-body pre code { padding: 0; background: none; }
.message .message-body a { color: #58a6ff; }
.message .message-body ul, .message .message-body ol { margin: 0.25rem 0; padding-left: 1.5rem; }

.message-images {
  margin-top: 0.5rem;
}

.message-images img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 0.5rem;
}