Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,8 @@
+.venv/
+.env
+.env.*
+__pycache__/
+*.pyc
+.vscode/
+.idea/
+*.log

.python-version

@@ -0,0 +1 @@
+3.12

README.md

@@ -1,6 +1,6 @@
 ---
-title: Chat_with_Evison
+title: chat_with_evison
 app_file: app.py
 sdk: gradio
-sdk_version: 5.49.1
+sdk_version: 6.1.0
 ---

app.py

@@ -1,336 +1,6 @@
-from dotenv import load_dotenv
-from openai import OpenAI
-import json
-import os
-import requests
-from pypdf import PdfReader
-import gradio as gr
-
-load_dotenv(override=True)
-
-
-# ---------- Tools (Pushover logging) ----------
-
-def push(text):
-    try:
-        requests.post(
-            "https://api.pushover.net/1/messages.json",
-            data={
-                "token": os.getenv("PUSHOVER_TOKEN"),
-                "user": os.getenv("PUSHOVER_USER"),
-                "message": text,
-            },
-            timeout=5,
-        )
-    except Exception as e:
-        # Fail silently in the UI – this is just for logging
-        print(f"Pushover error: {e}", flush=True)
-
-
-def record_user_details(email, name="Name not provided", notes="not provided"):
-    push(f"Recording {name} with email {email} and notes {notes}")
-    return {"recorded": "ok"}
-
-
-def record_unknown_question(question):
-    push(f"User made an interesting question that I could not answer: {question}")
-    return {"recorded": "ok"}
-
-
-record_user_details_json = {
-    "name": "record_user_details",
-    "description": "Use this tool to record that a user is interested in being in touch and provided an email address",
-    "parameters": {
-        "type": "object",
-        "properties": {
-            "email": {
-                "type": "string",
-                "description": "The email address of this user"
-            },
-            "name": {
-                "type": "string",
-                "description": "The user's name, if they provided it"
-            },
-            "notes": {
-                "type": "string",
-                "description": "Any additional information about the conversation that's worth recording to give context"
-            }
-        },
-        "required": ["email"],
-        "additionalProperties": False
-    }
-}
-
-record_unknown_question_json = {
-    "name": "record_unknown_question",
-    "description": "Always use this tool to record any question that couldn't be answered as you didn't know the answer",
-    "parameters": {
-        "type": "object",
-        "properties": {
-            "question": {
-                "type": "string",
-                "description": "The question that couldn't be answered"
-            },
-        },
-        "required": ["question"],
-        "additionalProperties": False
-    }
-}
-
-tools = [
-    {"type": "function", "function": record_user_details_json},
-    {"type": "function", "function": record_unknown_question_json},
-]
-
-
-# ---------- Me class (your digital twin) ----------
-
-class Me:
-
-    def __init__(self):
-        self.openai = OpenAI()
-        self.name = "Evison Ndoni"
-
-        # Load LinkedIn-ish PDF text
-        self.linkedin = ""
-        try:
-            reader = PdfReader("me/evison.pdf")
-            for page in reader.pages:
-                text = page.extract_text()
-                if text:
-                    self.linkedin += text + "\n"
-        except Exception as e:
-            print(f"Error reading PDF: {e}", flush=True)
-
-        # Load summary
-        try:
-            with open("me/summary.txt", "r", encoding="utf-8") as f:
-                self.summary = f.read()
-        except Exception as e:
-            print(f"Error reading summary.txt: {e}", flush=True)
-            self.summary = ""
-
-        # Extra hard-coded context about you (for a richer persona)
-        self.extra_context = """
-- 26-year-old software developer based in Tirana, Albania.
-- Strong frontend background: React, Next.js, TypeScript, HTML, CSS, SCSS, Tailwind.
-- Mobile experience with Flutter, especially for polished, fluid UI/UX.
-- Building portfolio projects like SeatReserve (seat booking SaaS) with modern full-stack tools.
-- Currently learning Agentic AI and aiming to grow into a strong AI / Agentic AI engineer.
-- Values: disciplined growth, responsibility, integrity, and putting God first.
-- Interested in roles that blend software engineering with AI, problem solving, and product thinking.
-        """.strip()
-
-    def handle_tool_call(self, tool_calls):
-        results = []
-        for tool_call in tool_calls:
-            tool_name = tool_call.function.name
-            arguments = json.loads(tool_call.function.arguments)
-            print(f"Tool called: {tool_name}", flush=True)
-            tool = globals().get(tool_name)
-            result = tool(**arguments) if tool else {}
-            results.append({
-                "role": "tool",
-                "content": json.dumps(result),
-                "tool_call_id": tool_call.id
-            })
-        return results
-
-    def system_prompt(self):
-        system_prompt = f"""
-You are acting as {self.name}. You are answering questions on {self.name}'s personal website / career page,
-particularly questions related to {self.name}'s career, background, skills, experience, and aspirations.
-
-Your responsibilities:
-- Represent {self.name} as faithfully as possible.
-- Use the provided summary, LinkedIn-style profile information, and extra context below.
-- Be professional, clear, honest, and engaging – as if talking to a potential employer, client, or collaborator.
-- You can talk about his technical skills (React, Next.js, TypeScript, Flutter, Tailwind, etc.), portfolio projects,
-  and his interest in Agentic AI engineering and AI-powered products.
-- You can also briefly mention his values (faith, discipline, integrity) when it’s appropriate for the conversation.
-
-Tools:
-- If you don't know the answer to any question, use the `record_unknown_question` tool to log the question.
-- If the user is a potential lead or seems interested in working with {self.name}, gently encourage them to share
-  their email and log it using the `record_user_details` tool with a short note about the context.
-
-Tone:
-- Friendly, confident, thoughtful.
-- Don't oversell; be realistic but optimistic.
-- Keep answers concise but helpful, unless the user clearly wants depth.
-
-Below is your context. Use it actively:
-
-## Summary (CV-style overview):
-{self.summary}
-
-## LinkedIn-like Profile (from PDF):
-{self.linkedin}
-
-## Extra Context:
-{self.extra_context}
-
-With this context, please chat with the user, always staying in character as {self.name}.
-        """.strip()
-        return system_prompt
-
-    def chat(self, message, history):
-        """
-        message: latest user message (str)
-        history: list[dict] with {'role': 'user'|'assistant', 'content': str}
-                 (we use type="messages" in Gradio to match this format)
-        """
-        messages = [{"role": "system", "content": self.system_prompt()}] + history + [
-            {"role": "user", "content": message}
-        ]
-
-        done = False
-        response_message = None
-
-        while not done:
-            response = self.openai.chat.completions.create(
-                model="gpt-4o-mini",
-                messages=messages,
-                tools=tools
-            )
-            choice = response.choices[0]
-            finish_reason = choice.finish_reason
-
-            if finish_reason == "tool_calls":
-                message_with_tools = choice.message
-                tool_calls = message_with_tools.tool_calls
-                results = self.handle_tool_call(tool_calls)
-                messages.append(message_with_tools)
-                messages.extend(results)
-            else:
-                done = True
-                response_message = choice.message
-
-        return response_message.content if response_message else "Sorry, something went wrong."
-
-
-# ---------- Gradio UI ----------
-
-me = Me()
-
-# Custom chat handler for Gradio
-def respond(user_message, history):
-    """
-    user_message: str from the textbox
-    history: list of messages (role/content) used by the chatbot (type='messages')
-    """
-    if history is None:
-        history = []
-
-    assistant_reply = me.chat(user_message, history)
-
-    # Update history with the last user + assistant turn
-    new_history = history + [
-        {"role": "user", "content": user_message},
-        {"role": "assistant", "content": assistant_reply},
-    ]
-    return "", new_history, new_history  # (cleared textbox, chatbot value, state)
-
-
-def clear_chat():
-    return [], []  # chatbot, state
+from ui.layout import build_interface
 
+demo = build_interface()
 
 if __name__ == "__main__":
-    theme = gr.themes.Soft()  # no radius_scale -> compatible with more Gradio versions
-
-    with gr.Blocks(theme=theme, css="""
-        #app-container {
-            max-width: 1100px;
-            margin: 0 auto;
-        }
-        .chat-title {
-            text-align: center;
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 0.4rem;
-        }
-        .chat-subtitle {
-            text-align: center;
-            font-size: 0.95rem;
-            opacity: 0.85;
-            margin-bottom: 1.2rem;
-        }
-    """) as demo:
-        with gr.Column(elem_id="app-container"):
-            gr.Markdown(
-                f"""
-<div class="chat-title">Career Conversation with <span style="color:#b91c1c;">{me.name}</span></div>
-<div class="chat-subtitle">
-Ask me about my experience, projects, skills, or how I can help your team.
-</div>
-                """,
-                elem_id="title-block"
-            )
-
-            with gr.Row():
-                # Left: Chat area
-                with gr.Column(scale=3):
-                    chatbot = gr.Chatbot(
-                        label="Chat with Evison",
-                        type="messages",
-                        height=480,
-                        show_copy_button=True,
-                    )
-
-                    user_input = gr.Textbox(
-                        label="Your message",
-                        placeholder="Ask me about my experience, tech stack, or projects...",
-                        lines=3,
-                    )
-
-                    with gr.Row():
-                        send_btn = gr.Button("Send", variant="primary")
-                        clear_btn = gr.Button("Clear chat")
-
-                # Right: About panel
-                with gr.Column(scale=2):
-                    gr.Markdown(
-                        f"""
-### About {me.name}
-
-- Frontend & mobile engineer (React, Next.js, TypeScript, Flutter, Tailwind).
-- 3+ years of hands-on experience building real-world products.
-- Passionate about clean, modern UI/UX and maintainable codebases.
-- Currently learning **Agentic AI** and building AI-powered solutions.
-
-### What you can ask
-
-- Details about my recent projects (e.g. SeatReserve).
-- How I approach architecture, testing, performance, or collaboration.
-- How I see myself contributing to your team or product.
-- My availability, preferred work style, and career goals.
-
-If you're interested in working together, feel free to ask for my email
-or share yours so we can continue the conversation.
-                        """.strip()
-                    )
-
-        # State to hold full message history (in OpenAI format)
-        history_state = gr.State([])
-
-        # Wire up events
-        send_btn.click(
-            fn=respond,
-            inputs=[user_input, history_state],
-            outputs=[user_input, chatbot, history_state],
-        )
-
-        user_input.submit(
-            fn=respond,
-            inputs=[user_input, history_state],
-            outputs=[user_input, chatbot, history_state],
-        )
-
-        clear_btn.click(
-            fn=clear_chat,
-            inputs=None,
-            outputs=[chatbot, history_state],
-        )
-
     demo.launch()

logic/__init__.py

@@ -0,0 +1,2 @@
+# Logic package
+

logic/profile.py

@@ -0,0 +1,158 @@
+import json
+from pathlib import Path
+
+from dotenv import load_dotenv
+from openai import OpenAI
+from pypdf import PdfReader
+
+from logic.tools import FUNCTION_MAP, TOOLS
+
+load_dotenv(override=True)
+
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+class Me:
+    def __init__(self):
+        self.openai = OpenAI()
+        self.name = "Evison Ndoni"
+
+
+        pdf_path = BASE_DIR / "me" / "evison.pdf"
+        self.linkedin = ""
+        try:
+            if pdf_path.exists():
+                reader = PdfReader(str(pdf_path))
+                for page in reader.pages:
+                    text = page.extract_text()
+                    if text:
+                        self.linkedin += text
+            else:
+                self.linkedin = "(LinkedIn PDF not found on server.)"
+        except Exception as e:
+
+            self.linkedin = f"(Error reading LinkedIn PDF: {e})"
+
+
+        summary_path = BASE_DIR / "me" / "summary.txt"
+        try:
+            with open(summary_path, "r", encoding="utf-8") as f:
+                self.summary = f.read()
+        except Exception as e:
+            self.summary = f"(Summary file not found or unreadable: {e})"
+
+
+        self.extra_context = """
+- 26-year-old software engineer from Albania.
+- 3+ years experience with React, Next.js, TypeScript, Tailwind CSS and Flutter.
+- Currently learning Agentic AI and aiming for AI Engineer roles.
+- Values clean, fluid UI/UX and likes to build useful products and SaaS.
+- Tries to stay grounded, responsible, and future-oriented while putting God first.
+        """.strip()
+
+    def handle_tool_call(self, tool_calls):
+        results = []
+        for tool_call in tool_calls:
+            tool_name = tool_call.function.name
+            arguments = json.loads(tool_call.function.arguments)
+            print(f"Tool called: {tool_name}", flush=True)
+            tool = FUNCTION_MAP.get(tool_name)
+            result = tool(**arguments) if tool else {}
+            results.append(
+                {
+                    "role": "tool",
+                    "content": json.dumps(result),
+                    "tool_call_id": tool_call.id,
+                }
+            )
+        return results
+
+    def system_prompt(self):
+        system_prompt = (
+            f"You are acting as {self.name}. You are answering questions on "
+            f"{self.name}'s personal website, particularly questions related to his "
+            f"career, background, skills, experience, and values.\n\n"
+            f"Your responsibility is to represent {self.name} as faithfully as possible. "
+            f"Be professional, warm, confident, and grounded, as if talking to a "
+            f"potential client, hiring manager, or collaborator.\n\n"
+            f"{self.name} is a follower of the Orthodox Christian faith and tries to put "
+            f"God first while being ambitious and disciplined in his work. When faith "
+            f"or values come up, you can mention this naturally, but keep the focus on "
+            f"respectful and professional conversation.\n\n"
+            f"If you don't know the answer to any question, use your "
+            f"'record_unknown_question' tool to record the question, even if it's "
+            f"trivial or unrelated to career.\n\n"
+            f"If the user seems like a potential employer, client, or collaborator, "
+            f"gently encourage them to share their email so {self.name} can follow up, "
+            f"and record it using your 'record_user_details' tool.\n"
+        )
+
+        system_prompt += f"\n## Short Summary\n{self.summary}\n"
+        system_prompt += f"\n## LinkedIn-style Profile\n{self.linkedin}\n"
+        system_prompt += f"\n## Additional Personal Context\n{self.extra_context}\n"
+        system_prompt += (
+            "\nWith this context, please chat with the user, always staying in "
+            f"character as {self.name}."
+        )
+        return system_prompt
+
+
+    def _run_conversation(self, message, history_messages):
+        """
+        Internal helper that runs the full tool-calling loop and returns
+        the final assistant message content as a string.
+        `history_messages` is a list of OpenAI-style dicts: [{role, content}, ...]
+        (no system message inside; we add it here).
+        """
+        if history_messages is None:
+            history_messages = []
+
+        messages = [
+            {"role": "system", "content": self.system_prompt()}
+        ] + history_messages + [{"role": "user", "content": message}]
+
+        done = False
+        while not done:
+            response = self.openai.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=messages,
+                tools=TOOLS,
+            )
+            choice = response.choices[0]
+            if choice.finish_reason == "tool_calls":
+                message_tool = choice.message
+                tool_calls = message_tool.tool_calls
+                results = self.handle_tool_call(tool_calls)
+                messages.append(message_tool)
+                messages.extend(results)
+            else:
+                done = True
+                final_message = choice.message
+                return final_message.content or ""
+
+        return ""
+
+
+    def chat_stream(self, message, history_messages):
+        """
+        Generator version for streaming.
+        Yields *partial assistant content* as a plain string.
+        Gradio can wrap this to update the Chatbot incrementally.
+        """
+        full_content = self._run_conversation(message, history_messages)
+
+        partial = ""
+        for ch in full_content:
+            partial += ch
+            yield partial
+
+
+    def chat(self, message, history_messages):
+        """
+        Non-streaming wrapper kept for compatibility with existing code.
+        It internally uses `chat_stream` and just returns the final string.
+        """
+        last_chunk = ""
+        for chunk in self.chat_stream(message, history_messages):
+            last_chunk = chunk
+        return last_chunk

logic/tools.py

@@ -0,0 +1,83 @@
+import os
+import requests
+from dotenv import load_dotenv
+
+load_dotenv(override=True)
+
+
+def push(text: str):
+    """Send a notification via Pushover when credentials are configured."""
+    if not os.getenv("PUSHOVER_TOKEN") or not os.getenv("PUSHOVER_USER"):
+        # Fail silently if pushover is not configured – avoids runtime errors
+        print("[PUSHOVER] Not configured, message was:", text, flush=True)
+        return
+    requests.post(
+        "https://api.pushover.net/1/messages.json",
+        data={
+            "token": os.getenv("PUSHOVER_TOKEN"),
+            "user": os.getenv("PUSHOVER_USER"),
+            "message": text,
+        },
+    )
+
+
+def record_user_details(email, name="Name not provided", notes="not provided"):
+    push(f"Recording {name} with email {email} and notes {notes}")
+    return {"recorded": "ok"}
+
+
+def record_unknown_question(question):
+    push(f"User made an interesting question that I could not answer: {question}")
+    return {"recorded": "ok"}
+
+
+record_user_details_json = {
+    "name": "record_user_details",
+    "description": "Use this tool to record that a user is interested in being in touch and provided an email address",
+    "parameters": {
+        "type": "object",
+        "properties": {
+            "email": {
+                "type": "string",
+                "description": "The email address of this user",
+            },
+            "name": {
+                "type": "string",
+                "description": "The user's name, if they provided it",
+            },
+            "notes": {
+                "type": "string",
+                "description": "Any additional information about the conversation that's worth recording to give context",
+            },
+        },
+        "required": ["email"],
+        "additionalProperties": False,
+    },
+}
+
+record_unknown_question_json = {
+    "name": "record_unknown_question",
+    "description": "Always use this tool to record any question that couldn't be answered as you didn't know the answer",
+    "parameters": {
+        "type": "object",
+        "properties": {
+            "question": {
+                "type": "string",
+                "description": "The question that couldn't be answered",
+            },
+        },
+        "required": ["question"],
+        "additionalProperties": False,
+    },
+}
+
+TOOLS = [
+    {"type": "function", "function": record_user_details_json},
+    {"type": "function", "function": record_unknown_question_json},
+]
+
+FUNCTION_MAP = {
+    "record_user_details": record_user_details,
+    "record_unknown_question": record_unknown_question,
+}
+

pyproject.toml

@@ -0,0 +1,13 @@
+[project]
+name = "chat-with-evison"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "gradio>=6.1.0",
+    "openai>=2.9.0",
+    "pypdf>=6.4.1",
+    "python-dotenv>=1.2.1",
+    "requests>=2.32.5",
+]

requirements.txt

@@ -1,6 +1,5 @@
-requests
-python-dotenv
-gradio
-pypdf
-openai
-openai-agents
+gradio
+openai
+python-dotenv
+pypdf
+requests

ui/__init__.py

@@ -0,0 +1,2 @@
+# UI package
+

ui/layout.py

@@ -0,0 +1,89 @@
+from pathlib import Path
+
+import gradio as gr
+
+from logic.profile import Me
+
+
+def _load_css() -> str:
+    css_path = Path(__file__).parent / "styles.css"
+    with open(css_path, "r", encoding="utf-8") as f:
+        return f.read()
+
+
+def build_interface():
+    me = Me()
+    custom_css = _load_css()
+
+    with gr.Blocks(css=custom_css) as demo:
+        with gr.Row(elem_classes="app-row"):
+            with gr.Column(scale=3, elem_classes="chat-column"):
+                gr.Markdown(
+                    "### Chat with **Evison Ndoni**",
+                    elem_classes="title-text",
+                )
+                chatbot = gr.Chatbot(
+                    height=520,
+                    elem_id="chatbot",
+                )
+                with gr.Row(elem_classes="input-row"):
+                    msg = gr.Textbox(
+                        placeholder=(
+                            "Ask about my background, past work, AI/agentic AI, "
+                            "or anything career-related..."
+                        ),
+                        label="",
+                        show_label=False,
+                        elem_id="chat-input",
+                    )
+
+                with gr.Row(elem_classes="button-row"):
+                    send_btn = gr.Button("Send", elem_id="send-btn")
+                    clear_btn = gr.Button("Clear chat", elem_id="clear-btn")
+
+            with gr.Column(scale=2, elem_classes="sidebar-column"):
+                gr.Markdown(
+                    """
+### About Evison Ndoni
+
+- Software engineer (React, Next.js, TypeScript, Tailwind CSS, Flutter)  
+- Currently learning **Agentic AI** and building AI-powered projects  
+- Enjoys clean, SaaS-style product design and long-term thinking  
+
+If you're a recruiter, hiring manager, or potential collaborator,  
+feel free to ask anything about my experience, stack, or projects.
+
+You can also **share your email in the chat** if you'd like me to follow up.
+                    """,
+                    elem_classes="about-card",
+                )
+
+
+        def respond(message, history):
+            """
+            Gradio 6 Chatbot uses a 'messages' format:
+            history is a list of dicts: [{ "role": "user"|"assistant", "content": "..." }, ...]
+            We must return the *updated* history in the same format.
+            """
+            if history is None:
+                history = []
+
+            assistant_reply = me.chat(message, history)
+
+            new_history = history + [
+                {"role": "user", "content": message},
+                {"role": "assistant", "content": assistant_reply},
+            ]
+            return new_history
+
+        send_btn.click(
+            respond,
+            inputs=[msg, chatbot],
+            outputs=chatbot,
+        )
+        send_btn.click(lambda: "", inputs=None, outputs=msg)
+        clear_btn.click(lambda: [], inputs=None, outputs=chatbot)
+
+        demo.load(lambda: [], None, chatbot)
+
+    return demo

ui/styles.css

@@ -0,0 +1,163 @@
+html,
+body,
+.gradio-container {
+  background: #0a0f1f !important;
+  color: #e5e7eb !important;
+}
+
+:root {
+  color-scheme: dark;
+}
+
+:root {
+  --bg-main: #0a0f1f;
+  --bg-panel: #0f172a;
+  --bg-card: #111827;
+  --bg-elevated: #1e293b;
+  --bg-input: #0f172a;
+
+  --text-primary: #e5e7eb;
+  --text-secondary: #9ca3af;
+  --text-muted: #6b7280;
+
+  --accent: #22c55e;
+  --accent-strong: #16a34a;
+
+  --border-subtle: rgba(148, 163, 184, 0.18);
+
+  --radius-lg: 18px;
+  --radius-md: 10px;
+
+  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.55);
+  --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.45);
+}
+
+.app-row {
+  max-width: 1180px;
+  margin: 50px auto;
+  padding: 28px;
+  border-radius: 26px;
+  background: var(--bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  box-shadow: var(--shadow-soft);
+}
+
+.title-text h3,
+.title-text h1 {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+#chatbot {
+  background: var(--bg-panel) !important;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-subtle);
+  height: 520px !important;
+  box-shadow: var(--shadow-card);
+}
+
+#chatbot .message.user {
+  background: rgba(255, 255, 255, 0.05) !important;
+  color: var(--text-primary) !important;
+}
+
+#chatbot .message.bot {
+  background: rgba(20, 25, 40, 0.8) !important;
+  color: var(--text-secondary) !important;
+}
+
+#chat-input {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+#chat-input textarea {
+  width: 100%;
+  background: #020617;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  font-size: 0.95rem;
+  color: #e5e7eb;
+  outline: none;
+  box-shadow: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease,
+    background-color 0.15s ease;
+}
+
+#chat-input textarea::placeholder {
+  color: rgba(148, 163, 184, 0.8);
+}
+
+#chat-input textarea:focus {
+  background-color: #020617;
+  border-color: #585858; /* soft green */
+  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
+}
+
+.button-row {
+  margin-top: 12px;
+  gap: 12px;
+}
+
+#send-btn {
+  background: linear-gradient(135deg, #1ed760, #1abc5b);
+  border: none;
+  color: white;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 0.65rem 1.8rem;
+  font-size: 0.95rem;
+
+  box-shadow: 0 4px 14px rgba(30, 215, 96, 0.25); /* subtle shadow */
+  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
+}
+
+#send-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px rgba(30, 215, 96, 0.32);
+  filter: brightness(1.05);
+}
+
+#send-btn:active {
+  transform: scale(0.97);
+  box-shadow: 0 3px 12px rgba(30, 215, 96, 0.2);
+}
+
+#clear-btn {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  padding: 0.65rem 1.8rem;
+}
+
+#clear-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+.about-card {
+  background: var(--bg-panel) !important;
+  padding: 22px;
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: var(--shadow-card);
+  color: var(--text-secondary) !important;
+}
+
+.about-card h3 {
+  color: var(--text-primary);
+  margin-bottom: 10px;
+}
+
+.about-card li::marker {
+  color: var(--accent);
+}
+
+@media (max-width: 768px) {
+  .app-row {
+    margin: 20px;
+    padding: 18px;
+  }
+}