Build a modern frontend-only demo for a consumer AI chatbot named "Ecoso.ai". It is a sustainable AI assistant that defaults to smaller, efficient models, runs on renewable energy, and offsets every query by planting trees.

Build this using React, Tailwind CSS, framer-motion (for animations), and lucide-react (for icons). Use dummy data and delayed responses for the chat interactions. No need for authentication or a real backend.

1. Design System & Theme

• Aesthetic: A sleek, minimal, nature-inspired light mode interface.
• Colors:
  • App Background: #F4F7F2 (soft pale green/off-white)
  • Primary Text: #1A2E1A (deep forest green)
  • Primary Accent/Buttons: #2D5A27 (dark solid green)
  • Light Backgrounds/Badges: #E8F0E6, #F9FAF9
  • Borders & Lines: #E0E7DE, #EDF2ED
  • Success/Highlight: #81C784
• Typography: Use Inter for general sans-serif text, and Space Grotesk for numbers/monospace elements.
• Styling Details: Use soft shadows, heavily rounded corners (rounded-2xl and rounded-3xl), and customize the webkit scrollbar to be thin with an #E0E7DE thumb.

2. Layout Structure

Create a full-screen layout (h-screen overflow-hidden) split into a sidebar and a main chat area:

Left Sidebar (Desktop Only):

• Fixed width of w-64, white background (bg-white), right border.
• Logo area: A dark green rounded square containing a Leaf icon, beside the text "Ecoso.ai" and a tiny uppercase subtitle "Regenerative AI".
• Impact Cards: Two clean, bordered cards representing live metrics:
  1. Forest Impact: Display a large number for trees (e.g., 1,400) with a decimal that increments.
  2. Carbon Offset: Display a figure for CO₂ removed (e.g., -24.3 kg).
• Footer: A "100% Renewable" lockup with a Zap icon denoting the server energy mix.

Main Chat Area:

• Header:
  • A sticky/absolute header with a frosted glass effect (backdrop-blur-md bg-white/50).
  • Show the model name ("Ecoso 7B-Optima"), a small efficiency badge ("EFFICIENCY: 98.4%"), and a "100% Renewable" label.
• Chat Feed:
  • A scrollable area.
  • User Messages: Dark green (#2D5A27) background with white text, aligned to the right. Apply rounded-2xl but make the top-right corner square (rounded-tr-none).
  • AI Messages: White background, thin border, dark text, aligned to the left. Apply rounded-2xl but make the top-left corner square (rounded-tl-none). Include an "E" avatar circle next to it.
  • AI Message Footer: Inside every AI bubble, include a small bordered statistics box showing "Compute Energy Usage" (e.g., 0.0002 kWh) and "Offset Status" (Verified Neutral) to emphasize the eco-friendly angle.
• Input Area:
  • Fixed at the bottom with a gradient fade blending into the app background (bg-gradient-to-t from-[#F4F7F2] to-transparent).
  • A large, white, pill-shaped text input with a soft drop shadow and placeholder: "Ask Ecoso anything sustainably..."
  • A circular submit button containing a Send icon inside the input field.
  • Disclaimer text below the input: "Ecoso.ai Distilled-3B-v2 Model • Powered by GreenCompute Norway".

3. Logic & Interactions

• Initialize the chat with a welcome message from Ecoso.