:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #19322c; background: #f5f8f5; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { cursor: wait; opacity: .65; } .app-shell { max-width: 980px; margin: 0 auto; padding: 24px 18px 48px; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; } .brand { display: flex; align-items: center; gap: 12px; }.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; font-weight: 800; background: #176b58; } h1, h2, h3, p { margin-top: 0; } h1 { font-size: 1.25rem; margin-bottom: 2px; } .brand p { color: #60746d; font-size: .9rem; margin-bottom: 0; } .toolbar, .form-actions { display: flex; flex-wrap: wrap; gap: 9px; }.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; font-weight: 650; }.primary { color: #fff; background: #176b58; }.primary:hover { background: #105544; }.secondary { color: #245247; border-color: #c8d9d2; background: #fff; }.text-button { color: #286452; background: transparent; text-decoration: underline; padding-left: 0; }.panel, .debug-card { background: #fff; border: 1px solid #dbe7e0; border-radius: 16px; box-shadow: 0 8px 24px rgba(26, 65, 51, .06); }.onboarding { max-width: 760px; margin: 0 auto; padding: 30px; }.onboarding h2, .chat-heading h2, .debug-heading h2 { margin-bottom: 8px; }.onboarding > p { color: #547068; }.eyebrow { display: block; margin-bottom: 7px; color: #39715f; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 20px; } label { display: grid; gap: 6px; color: #29483e; font-size: .9rem; font-weight: 650; }.wide { grid-column: span 2; } input, select, textarea { width: 100%; border: 1px solid #c7d8d0; border-radius: 9px; padding: 10px; color: #19322c; background: #fff; } input:focus, select:focus, textarea:focus { outline: 3px solid #bbdfd1; border-color: #318267; }.chat-panel { overflow: hidden; }.chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid #e4ece8; }.chat-heading h2 { margin: 0; }.status-chip { border-radius: 99px; padding: 6px 10px; color: #316652; background: #eaf5ef; font-size: .8rem; font-weight: 700; }.messages { display: grid; align-content: start; gap: 14px; min-height: 330px; max-height: 550px; overflow-y: auto; padding: 22px 24px; background: #fbfdfc; }.message { align-self: start; max-width: min(80%, 620px); padding: 12px 14px; border-radius: 14px; }.message.owner { justify-self: end; color: #fff; background: #176b58; border-bottom-right-radius: 3px; }.message.bot { justify-self: start; background: #eaf3ef; border-bottom-left-radius: 3px; }.message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; line-height: 1.5; }.message-label { display: block; font-size: .76rem; font-weight: 800; opacity: .8; }.bot-introduction { font-weight: 700; }.bot-questions { display: grid; gap: 8px; margin: 9px 0 0; padding-left: 21px; line-height: 1.5; }.bot-questions li::marker { color: #176b58; }.message-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 18px 24px; border-top: 1px solid #e4ece8; }.message-form textarea { min-height: 58px; resize: vertical; }.debug-panel { margin-top: 20px; padding: 24px; border: 1px dashed #8db9a9; border-radius: 16px; background: #eff8f3; }.debug-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }.debug-heading p { max-width: 330px; color: #58736a; font-size: .9rem; }.debug-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.debug-card { padding: 16px; box-shadow: none; }.debug-card h3 { margin-bottom: 12px; font-size: .95rem; } dl { margin: 0; } dl > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 10px; padding: 8px 0; border-top: 1px solid #e7efeb; } dl > div:first-child { border-top: 0; padding-top: 0; } dt { color: #58736a; font-size: .84rem; } dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .87rem; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #safe-error { margin: 0 0 14px; color: #a12727; font-weight: 650; } @media (max-width: 640px) { .topbar, .chat-heading, .debug-heading { align-items: flex-start; flex-direction: column; }.profile-grid, .debug-grid { grid-template-columns: 1fr; }.wide { grid-column: auto; }.message { max-width: 92%; }.message-form { grid-template-columns: 1fr; }.message-form .button { justify-self: end; } .onboarding { padding: 22px; } }