:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #171717;
  background: #f5f5f3;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #f5f5f3;
}

button, textarea { font: inherit; }

.app-shell {
  width: min(100%, 920px);
  height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fff;
  box-shadow: 0 0 32px rgb(0 0 0 / 6%);
}

.topbar {
  padding: calc(13px + env(safe-area-inset-top)) 20px 13px;
  text-align: center;
  border-bottom: 1px solid #e9e9e7;
  background: rgb(255 255 255 / 96%);
}

.topbar h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: .02em; }
.topbar p { margin: 3px 0 0; color: #8a8a85; font-size: 12px; }

.messages {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 20px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.message {
  display: flex;
  margin: 0 0 18px;
}

.message.user { justify-content: flex-end; }
.message.assistant { justify-content: flex-start; }

.bubble {
  max-width: min(78%, 680px);
  padding: 11px 14px;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.65;
  font-size: 15px;
}

.assistant .bubble {
  background: #f1f1ef;
  border-bottom-left-radius: 5px;
}

.user .bubble {
  color: #fff;
  background: #171717;
  border-bottom-right-radius: 5px;
}

.bubble .file-note {
  display: block;
  margin-top: 7px;
  color: inherit;
  opacity: .72;
  font-size: 12px;
}

.message.pending .bubble::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #777;
  box-shadow: 10px 0 #aaa, 20px 0 #ccc;
  animation: pulse 1.1s infinite ease-in-out;
}

@keyframes pulse { 50% { opacity: .35; } }

.composer {
  padding: 12px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #e9e9e7;
  background: #fff;
}

.composer-row { display: flex; align-items: flex-end; gap: 8px; }

.file-button,
.send-button,
#remove-file {
  border: 0;
  cursor: pointer;
}

.file-button {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d9d9d5;
  border-radius: 12px;
  color: #333;
  font-size: 25px;
  background: #fff;
}

#message-input {
  min-height: 42px;
  max-height: 132px;
  flex: 1;
  resize: none;
  border: 1px solid #d9d9d5;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  line-height: 1.45;
}

#message-input:focus { border-color: #777; box-shadow: 0 0 0 3px rgb(0 0 0 / 5%); }

.send-button {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 17px;
  border-radius: 12px;
  color: #fff;
  background: #171717;
  font-weight: 650;
}

.send-button:disabled, .file-button.disabled { opacity: .45; cursor: not-allowed; }

.attachment {
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px 50px;
  padding: 5px 8px 5px 10px;
  border-radius: 9px;
  color: #555;
  background: #f1f1ef;
  font-size: 12px;
}

.attachment:not([hidden]) { display: flex; }
.attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#remove-file { margin-left: 7px; padding: 0 3px; color: #777; background: transparent; font-size: 18px; }
.hint { margin: 7px 0 0 50px; color: #999; font-size: 11px; }

@media (max-width: 640px) {
  .messages { padding: 18px 12px; }
  .bubble { max-width: 88%; font-size: 15px; }
  .composer { padding-inline: 10px; }
  .hint { margin-left: 0; text-align: center; }
  .attachment { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .messages { scroll-behavior: auto; }
  .message.pending .bubble::after { animation: none; }
}