Spaces:
Configuration error
Configuration error
| :root { | |
| --green: #237447; | |
| --green-dark: #185735; | |
| --green-light: #eaf5ed; | |
| --background: #f5f8f5; | |
| --text: #1d2b22; | |
| --muted: #69766d; | |
| --border: #e1e8e1; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--background); | |
| color: var(--text); | |
| font-family: Arial, Helvetica, sans-serif; | |
| line-height: 1.5; | |
| } | |
| .header { | |
| min-height: 76px; | |
| padding: 16px 7%; | |
| background: white; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--green-dark); | |
| text-decoration: none; | |
| font-weight: 800; | |
| font-size: 1.3rem; | |
| } | |
| .brand-icon { | |
| font-size: 1.8rem; | |
| } | |
| .status { | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| .status span { | |
| display: inline-block; | |
| width: 9px; | |
| height: 9px; | |
| margin-right: 6px; | |
| background: #38a169; | |
| border-radius: 50%; | |
| } | |
| .container { | |
| width: min(760px, 92%); | |
| margin: 48px auto; | |
| } | |
| .welcome { | |
| text-align: center; | |
| margin-bottom: 28px; | |
| } | |
| .eyebrow { | |
| color: var(--green); | |
| font-size: 0.75rem; | |
| letter-spacing: 2px; | |
| font-weight: 700; | |
| } | |
| .welcome h1 { | |
| font-size: clamp(2rem, 5vw, 3.2rem); | |
| line-height: 1.15; | |
| margin: 12px 0; | |
| letter-spacing: -1.5px; | |
| } | |
| .welcome h1 span { | |
| color: var(--green); | |
| } | |
| .welcome>p:last-child { | |
| color: var(--muted); | |
| max-width: 520px; | |
| margin: 0 auto; | |
| } | |
| .chat-card { | |
| background: white; | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 12px 36px rgba(27, 66, 40, 0.07); | |
| } | |
| .chat-heading { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| padding: 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .avatar { | |
| display: grid; | |
| place-items: center; | |
| width: 46px; | |
| height: 46px; | |
| border-radius: 14px; | |
| background: var(--green-light); | |
| font-size: 1.5rem; | |
| } | |
| .chat-heading h2 { | |
| margin: 0; | |
| font-size: 1.05rem; | |
| } | |
| .chat-heading p { | |
| margin: 3px 0 0; | |
| font-size: 0.8rem; | |
| color: var(--muted); | |
| } | |
| .messages { | |
| height: 340px; | |
| overflow-y: auto; | |
| padding: 22px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .message { | |
| display: flex; | |
| } | |
| .message.user { | |
| justify-content: flex-end; | |
| } | |
| .bubble { | |
| max-width: 88%; | |
| padding: 12px 15px; | |
| border-radius: 15px; | |
| overflow-wrap: anywhere; | |
| white-space: pre-wrap; | |
| font-size: 0.94rem; | |
| } | |
| .bot .bubble { | |
| background: #f0f4f0; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .user .bubble { | |
| background: var(--green); | |
| color: white; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .meta { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.75rem; | |
| margin-top: 8px; | |
| } | |
| .user .meta { | |
| color: #e1f3e6; | |
| } | |
| .suggestions { | |
| padding: 0 20px 18px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .suggestions form { | |
| margin: 0; | |
| } | |
| .suggestions button { | |
| background: white; | |
| color: var(--green-dark); | |
| border: 1px solid #cbded0; | |
| border-radius: 20px; | |
| padding: 8px 12px; | |
| cursor: pointer; | |
| } | |
| .suggestions button:hover { | |
| background: var(--green-light); | |
| } | |
| .input-area { | |
| margin: 0 20px; | |
| padding: 8px; | |
| border: 1px solid #d6e1d8; | |
| border-radius: 14px; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .input-area:focus-within { | |
| border-color: var(--green); | |
| box-shadow: 0 0 0 3px rgba(35, 116, 71, 0.1); | |
| } | |
| .input-area input { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 10px; | |
| font: inherit; | |
| border: 0; | |
| outline: 0; | |
| } | |
| .input-area button { | |
| border: 0; | |
| border-radius: 10px; | |
| background: var(--green); | |
| color: white; | |
| padding: 10px 18px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| .input-area button:hover { | |
| background: var(--green-dark); | |
| } | |
| .input-area button:disabled { | |
| opacity: 0.6; | |
| cursor: wait; | |
| } | |
| .disclaimer { | |
| padding: 0 20px 18px; | |
| margin: 12px 0 0; | |
| font-size: 0.76rem; | |
| color: var(--muted); | |
| } | |
| footer { | |
| text-align: center; | |
| color: var(--muted); | |
| margin-top: 24px; | |
| font-size: 0.8rem; | |
| } | |
| .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; | |
| } | |
| @media (max-width: 520px) { | |
| .header { | |
| padding: 14px 4%; | |
| } | |
| .status { | |
| font-size: 0.72rem; | |
| } | |
| .container { | |
| margin: 28px auto; | |
| } | |
| .messages { | |
| height: 380px; | |
| padding: 15px; | |
| } | |
| .input-area { | |
| margin: 0 12px; | |
| } | |
| .suggestions { | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| } | |
| } |