:root {
  color: #172127;
  background: #f4f7f5;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

button,
input,
textarea { font: inherit; }

button { cursor: pointer; }

.app-shell { min-height: 100vh; max-width: 1240px; margin: 0 auto; padding: 28px; }

.app-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid #c9d5ce; padding-bottom: 18px; }

.eyebrow { margin: 0 0 6px; color: #397152; font-size: 12px; font-weight: 700; letter-spacing: 0; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 28px; line-height: 1.3; }
h2 { margin-bottom: 20px; font-size: 21px; }

.connection-status { margin: 0; color: #687773; font-size: 14px; }

.login-layout { display: grid; min-height: calc(100vh - 151px); place-items: center; }

.login-form { width: min(100%, 380px); border: 1px solid #c9d5ce; background: #fff; padding: 28px; }

.login-form label { display: grid; gap: 8px; margin-bottom: 18px; color: #43534f; font-size: 14px; font-weight: 600; }

input, textarea { width: 100%; border: 1px solid #aebdb5; border-radius: 4px; background: #fff; color: #172127; padding: 10px 12px; }
input:focus, textarea:focus { border-color: #24754c; outline: 2px solid rgba(36, 117, 76, 0.16); outline-offset: 1px; }

button { border: 1px solid #1e6943; border-radius: 4px; background: #1e6943; color: #fff; min-height: 40px; padding: 8px 16px; font-weight: 600; }
button:hover { background: #175837; }
button:disabled { cursor: not-allowed; opacity: 0.6; }

.form-error { min-height: 20px; margin: -6px 0 12px; color: #a12d2d; font-size: 13px; }

.workspace { display: grid; min-height: calc(100vh - 151px); grid-template-columns: 235px minmax(0, 1fr); }

.sidebar { border-right: 1px solid #c9d5ce; padding: 24px 24px 24px 0; }
.sidebar-label { margin-bottom: 4px; color: #687773; font-size: 12px; }
.account-email { overflow-wrap: anywhere; font-weight: 650; }
.limit-list { margin: 30px 0; }
.limit-list div { border-top: 1px solid #dce4df; padding: 12px 0; }
.limit-list dt { color: #687773; font-size: 13px; }
.limit-list dd { margin: 5px 0 0; font-size: 15px; font-weight: 600; }
.secondary-button { width: 100%; border-color: #84958d; background: transparent; color: #2d443a; }
.secondary-button:hover { background: #e6eee9; }

.conversation { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; padding: 24px 0 24px 30px; }
.messages { display: flex; min-height: 350px; flex-direction: column; gap: 14px; overflow-y: auto; padding: 6px 6px 24px 0; }
.message { max-width: min(760px, 90%); border-left: 3px solid #aebdb5; padding: 10px 14px; background: #fff; line-height: 1.7; }
.message p { margin: 0; white-space: pre-wrap; }
.user-message { align-self: end; border-left: 0; border-right: 3px solid #1e6943; background: #e9f4ed; }
.message-sources { margin: 10px 0 0; color: #60716a; font-size: 13px; }

.attachment-bar { display: flex; align-items: center; gap: 12px; border-top: 1px solid #c9d5ce; padding: 12px 0; }
.attachment-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #84958d; border-radius: 4px; color: #264636; cursor: pointer; font-size: 22px; line-height: 1; }
.attachment-button:hover { background: #e6eee9; }
.attachment-button input { display: none; }
.upload-status { margin: 0; color: #60716a; font-size: 13px; }

.chat-composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.chat-composer textarea { resize: vertical; min-height: 48px; max-height: 160px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .app-shell { padding: 18px; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid #c9d5ce; padding: 16px 0; }
  .limit-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
  .limit-list div { padding: 8px 0; }
  .secondary-button { width: auto; }
  .conversation { min-height: calc(100vh - 334px); padding: 18px 0; }
  .messages { min-height: 260px; }
}