:root { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #f4f6f8; color: #1c2430; font-size: 15px; line-height: 1.6;
}
.app { max-width: 520px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; background: #f4f6f8; }

.bar {
  flex: none; height: 54px; padding: 0 14px; padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: space-between;
  background: #ffffff; border-bottom: 1px solid #e7ebf0;
}
.bar-left { display: flex; align-items: center; gap: 9px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #2ba88a; display: inline-block; }
.title { font-size: 16px; font-weight: 500; }
.bar-btn { border: 1px solid #dfe4ea; background: #fff; color: #6a7482; font-size: 13px; padding: 5px 13px; border-radius: 16px; cursor: pointer; }
.bar-btn:active { background: #f1f3f6; }

.list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 12px 8px; }
.row { display: flex; margin-bottom: 16px; align-items: flex-start; }
.row.user { justify-content: flex-end; }
.stack { max-width: 82%; display: flex; flex-direction: column; align-items: flex-start; }
.row.user .stack { align-items: flex-end; }
.bubble {
  max-width: 100%; padding: 10px 13px; border-radius: 14px; font-size: 15px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.65;
}
.row.ai .bubble { background: #ffffff; border: 1px solid #e7ebf0; border-top-left-radius: 4px; }
.row.user .bubble { background: #d9f0e7; border: 1px solid #cbe8dc; border-top-right-radius: 4px; }
.bubble.typing { color: #8a94a2; font-size: 14px; }
.imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.imgs img { width: 104px; height: 104px; object-fit: cover; border-radius: 8px; border: 1px solid #e7ebf0; background: #fafbfc; cursor: zoom-in; }
.tip { color: #9aa4b1; font-size: 12px; margin-top: 6px; }

.composer {
  flex: none; display: flex; gap: 9px; align-items: flex-end; padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #ffffff; border-top: 1px solid #e7ebf0;
}
.composer textarea {
  flex: 1; resize: none; border: 1px solid #dfe4ea; border-radius: 10px;
  padding: 9px 11px; font-size: 15px; line-height: 1.5; max-height: 96px;
  font-family: inherit; outline: none; background: #fbfcfd; color: #1c2430;
}
.composer textarea:focus { border-color: #2ba88a; background: #fff; }
.send {
  flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 10px;
  background: #2ba88a; color: #fff; font-size: 15px; cursor: pointer;
}
.send:disabled { background: #b9c3cd; cursor: default; }
.footnote { flex: none; text-align: center; font-size: 11px; color: #aab3bd; padding: 0 0 calc(6px + env(safe-area-inset-bottom)); background: #fff; }

.lightbox {
  position: fixed; inset: 0; z-index: 99; background: rgba(12, 18, 24, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94%; max-height: 82%; object-fit: contain; }
.lightbox-tip { color: #cbd3dc; font-size: 12px; }