:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; color: #17211b; background: #eef3ef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #f8fbf8, #e7eee9); }
button, textarea, input { font: inherit; }
.app-shell { width: min(900px, 100%); min-height: 100vh; margin: auto; background: #fff; display: grid; grid-template-rows: auto auto 1fr auto; box-shadow: 0 0 50px #1f3c2a18; }
header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e2e9e4; }
header > div { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: white; background: #1d6b45; font-weight: 800; font-size: 26px; }
.brand-mark.small { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.profile-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px; background: #f6f8f6; }
.profile { border: 1px solid #cbd8cf; background: white; color: #31513e; padding: 10px; border-radius: 12px; cursor: pointer; }
.profile.active { background: #1d6b45; border-color: #1d6b45; color: white; }
.messages { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.message { max-width: 80%; padding: 12px 15px; border-radius: 16px; line-height: 1.45; white-space: pre-wrap; }
.message.assistant { background: #eef4ef; align-self: flex-start; border-bottom-left-radius: 5px; }
.message.user { background: #1d6b45; color: white; align-self: flex-end; border-bottom-right-radius: 5px; }
.message small { display: block; margin-top: 7px; opacity: .7; }
.waiting { opacity: .65; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px; border-top: 1px solid #e2e9e4; }
textarea, input { width: 100%; border: 1px solid #bdccc2; border-radius: 12px; padding: 12px; background: white; }
textarea { resize: none; }
button { border: 0; border-radius: 12px; padding: 11px 18px; background: #1d6b45; color: white; cursor: pointer; }
.link-button { color: #31513e; background: transparent; padding: 6px; }
.login-page { display: grid; place-items: center; padding: 20px; }
.login-card { width: min(390px, 100%); background: white; padding: 34px; border-radius: 24px; box-shadow: 0 20px 60px #17392320; }
.login-card .brand-mark { margin: auto; }
.login-card h1, .login-card p { text-align: center; }
.login-card form { display: grid; gap: 16px; margin-top: 24px; }
.login-card label { display: grid; gap: 6px; color: #405047; }
.error { background: #fff0ef; color: #9a2d26; border-radius: 10px; padding: 10px; }
@media (max-width: 600px) { .message { max-width: 92%; } .composer { grid-template-columns: 1fr; } }