First version

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.10.6
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --trusted-host pypi.org --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,232 @@
+# GET /models
+# GET /tools
+# POST /chat -> Groq -> response
+
+import asyncio
+import json
+import traceback
+from typing import List, Optional
+from contextlib import AsyncExitStack
+import uuid
+
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from fastapi import FastAPI, Request, HTTPException, Depends
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, JSONResponse
+
+
+from mcp import ClientSession, StdioServerParameters
+from mcp.client.stdio import stdio_client
+
+from groq import Groq, APIConnectionError
+from dotenv import load_dotenv
+import os
+import httpx
+
+sessions = {}
+unique_apikeys = []
+
+class MCPClient:
+    def __init__(self):
+        self.session: Optional[ClientSession] = None
+        self.exit_stack = AsyncExitStack()
+        self.current_model = None
+        self.groq = None
+        self.api_key = None
+        self.messages = [{
+            "role": "system",
+            "content": "You are a helpful assistant that have access to different tools via MCP. Make complete answers."
+        }]
+        self.tool_use = True
+        self.models = None
+        self.tools = []
+
+    async def connect(self, api_key: str):
+        try:
+            self.groq = Groq(api_key=api_key, http_client=httpx.Client(verify=False, timeout=30))
+            self.api_key = api_key
+        except APIConnectionError as e:
+            traceback.print_exception(e)
+            return False
+        except Exception as e:
+            traceback.print_exception(e)
+            return False
+        server_params = StdioServerParameters(command="uv", args=["run", "server.py"])
+        
+        stdio_transport = await self.exit_stack.enter_async_context(stdio_client(server_params))
+        self.stdio, self.write = stdio_transport
+        self.session = await self.exit_stack.enter_async_context(ClientSession(self.stdio, self.write))
+        
+        await self.session.initialize()
+        
+        response = await self.session.list_tools()
+        tools = response.tools
+        print("\nConnected to server with tools:", [tool.name for tool in tools])
+        self.tools = [{"type": "function", "function": { 
+            "name": tool.name,
+            "description": tool.description,
+            "parameters": tool.inputSchema
+        }} for tool in tools]
+
+    def populate_model(self):
+        self.models = sorted([m.id for m in self.groq.models.list().data])
+
+    async def process_query(self, query: str) -> str:
+        """Process a query using Groq and available tools"""
+        self.messages.extend([
+            {
+                "role": "user",
+                "content": query
+            }
+        ])
+
+        response = self.groq.chat.completions.create(
+            model=self.current_model,
+            messages=self.messages,
+            tools=self.tools,
+            temperature=0
+        ) if self.tool_use else self.groq.chat.completions.create(
+            model=self.current_model,
+            messages=self.messages,
+            temperature=0.7
+        )
+
+        # Process response and handle tool calls
+        final_text = []
+
+        for choice in response.choices:
+            content = choice.message.content
+            tool_calls = choice.message.tool_calls
+            if content:
+                final_text.append(content)
+            if tool_calls:
+                print(tool_calls)
+                for tool in tool_calls:
+                    tool_name = tool.function.name
+                    tool_args = tool.function.arguments
+
+                    result = await self.session.call_tool(tool_name, json.loads(tool_args))
+                    print(f"[Calling tool {tool_name} with args {tool_args}]")
+
+                    if content is not None:
+                        self.messages.append({
+                            "role": "assistant",
+                            "content": content
+                        })
+                    self.messages.append({
+                        "role": "tool",
+                        "tool_call_id": tool.id,
+                        "content": str(result.content)
+                    })
+
+                    print(result.content[0].text)
+
+                    response = self.groq.chat.completions.create(
+                        model=self.current_model,
+                        messages=self.messages,
+                        temperature=0.7
+                    )
+
+                    final_text.append(response.choices[0].message.content)
+        return "\n".join(final_text)
+
+app = FastAPI()
+app.add_middleware(CORSMiddleware, allow_credentials=True, allow_headers=["*"], allow_methods=["*"], allow_origins=["*"])
+app.mount("/static", StaticFiles(directory="static"), name="static")
+mcp = MCPClient()
+
+class InitRequest(BaseModel):
+    api_key: str
+
+class InitResponse(BaseModel):
+    success: bool
+    session_id: str
+    models: Optional[list] = None
+    error: Optional[str] = None
+
+class LogoutRequest(BaseModel):
+    session_id: str
+
+def get_mcp_client(session_id: str) -> MCPClient|None:
+    """Get the MCPClient for a given session_id, or raise 404."""
+    client = sessions.get(session_id)
+    if client is None:
+        raise HTTPException(status_code=404, detail="Invalid session_id. Please re-initialize.")
+    return client
+
+@app.get("/")
+def root():
+    return FileResponse("index.html")
+
+@app.post("/init", response_model=InitResponse)
+async def init_server(req: InitRequest):
+    """
+    Initializes a new MCP client session. Returns a session_id.
+    """
+    api_key = req.api_key
+    session_id = str(uuid.uuid4())
+    mcp = MCPClient()
+
+    try:
+        ok = await mcp.connect(api_key)
+        if ok is False:
+            raise RuntimeError("Failed to connect to MCP or Groq with API key.")
+        mcp.populate_model()
+        
+        sessions[session_id] = mcp
+        if api_key not in unique_apikeys:
+            unique_apikeys.append(api_key)
+        else:
+            raise Exception("Session with this API key already exists. We won't re-return you the session ID. Bye-bye Hacker !!")
+        return InitResponse(
+            session_id=session_id,
+            models=mcp.models,
+            error=None,
+            success=True
+        )
+    except Exception as e:
+        traceback.print_exception(e)
+        return InitResponse(
+            session_id="",
+            models=None,
+            error=str(e),
+            success=False
+        )
+
+class ChatRequest(BaseModel):
+    session_id: str
+    query: str
+    tool_use: Optional[bool] = True
+    model: Optional[str] = "llama-3.3-70b-versatile"
+
+class ChatResponse(BaseModel):
+    output: str
+    error: Optional[str] = None
+
+@app.post("/chat", response_model=ChatResponse)
+async def chat(req: ChatRequest):
+    """
+    Handles chat requests for a given session.
+    """
+    try:
+        mcp = get_mcp_client(req.session_id)
+        mcp.tool_use = req.tool_use
+        if req.model in mcp.models:
+            mcp.current_model = req.model
+        else:
+            raise ValueError(f"Model not recognized: Not in the model list: {mcp.models}")
+        result = await mcp.process_query(req.query)
+        return ChatResponse(output=result)
+    except Exception as e:
+        traceback.print_exception(e)
+        return ChatResponse(output="", error=str(e))
+    
+@app.post("/logout")
+async def logout(logout_req: LogoutRequest):
+    """Clean up session resources."""
+    mcp = sessions.pop(logout_req.session_id, None)
+    unique_apikeys.remove(mcp.api_key)
+    if mcp and hasattr(mcp.exit_stack, "aclose"):
+        await mcp.exit_stack.aclose()
+    return {"success": True}

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Groq Chatbot SPA</title>
+  <link rel="stylesheet" href="static/style.css">
+</head>
+<body>
+  <!-- API Key Modal -->
+  <div id="modal" class="modal">
+    <div class="modal-content">
+      <h2>Enter Groq API Key</h2>
+      <input type="password" id="apiKeyInput" placeholder="Groq API Key">
+      <button id="loginBtn">Login</button>
+      <div id="loginError" class="error"></div>
+    </div>
+  </div>
+  
+  <!-- Chat App -->
+  <div id="app" class="hidden">
+    <header>
+      <span>Groq Chatbot</span>
+      <select id="modelSelect"></select>
+      <label class="toggle-label">
+        <input type="checkbox" id="toolToggle" checked>
+        Tool Calls
+      </label>
+      <button id="logoutBtn">Logout</button>
+    </header>
+    <div id="chatContainer"></div>
+    <div id="typingIndicator" class="typing hidden">Bot is typing...</div>
+    <form id="inputForm" autocomplete="off">
+      <input id="userInput" type="text" placeholder="Type your message..." autocomplete="off">
+      <button type="submit">Send</button>
+    </form>
+  </div>
+  <script src="static/script.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+uvicorn[standard]
+fastapi
+mcp[cli]
+httpx
+uv
+groq

server.py

@@ -0,0 +1,153 @@
+from typing import Any, List, Literal, Dict, Optional
+import httpx
+import traceback
+from mcp.server.fastmcp import FastMCP
+
+# Initialize FastMCP server
+mcp = FastMCP("patent-problematic-generator-helper")
+
+# API used
+ARXIV_BASE = "https://om4r932-arxiv.hf.space"
+DUCKDUCKGO_BASE = "https://ychkhan-ptt-endpoints.hf.space"
+DOC3GPPFINDER_BASE = "https://organizedprogrammers-3gppdocfinder.hf.space"
+
+# Request function
+
+async def post_data_to_api(url, **kwargs):
+    data = dict(kwargs)
+    if data is None or data == {}:
+        return (None, "")
+    headers = {"Accept": "application/json"}
+    async with httpx.AsyncClient(verify=False, timeout=180) as client:
+        try:
+            response = await client.post(url, headers=headers, json=data)
+            print(response)
+            response.raise_for_status()
+            return response.json()
+        except Exception as e:
+            traceback.print_exception(e)
+            return (None, e)
+        
+async def fake_post_data_to_api(url, **kwargs):
+    params = dict(kwargs)
+    if params is None or params == {}:
+        return (None, "")
+    headers = {"Accept": "application/json"}
+    async with httpx.AsyncClient(verify=False, timeout=180) as client:
+        try:
+            response = await client.post(url, headers=headers, params=params)
+            print(response)
+            response.raise_for_status()
+            return response.json()
+        except Exception as e:
+            traceback.print_exception(e)
+            return (None, e)
+
+async def get_data_from_api(url):
+    headers = {"Accept": "application/json"}
+    async with httpx.AsyncClient(verify=False, timeout=180) as client:
+        try:
+            response = await client.get(url, headers=headers)
+            print(response)
+            response.raise_for_status()
+            return response.json()
+        except Exception as e:
+            traceback.print_exception(e)
+            return (None, e)
+
+# Tools
+
+# arXiv
+
+@mcp.tool()
+async def get_arxiv_publications(keywords: str, limit: int):
+    """
+    Search arXiv publications based on keywords and a limit of documents printed
+    Arguments available: keywords: string [mandatory], limit: integer [mandatory, default = 5]
+    """
+    endpoint = ARXIV_BASE + "/search"
+    data = await post_data_to_api(endpoint, keyword=keywords, limit=limit)
+    if isinstance(data, tuple) and data[0] is None:
+        return f"An error has occured while getting publications: {data[1]}"
+    if data["error"]:
+        return data["message"]
+    if len(data) < 1:
+        return "No publications has been found"
+    
+    results = data["message"]
+    output = []
+    for pub, metadata in results.items():
+        output.append(f"arXiv pub ID: {pub}\nTitle: {metadata['title']}\nAuthors: {metadata['authors']}\nPublished on: {metadata['date']}\nAbstract: {metadata['abstract']}\nPDF URL: {metadata['pdf']}\n")
+    
+    return "-\n".join(output)
+
+# 3GPP Doc Finder
+
+@mcp.tool()
+async def get_document_url(doc_id: str, release: int = None):
+    """
+    Find 3GPP document (TSG docs, specifications or workshop files) only by their ID [note that it will only work with keywords] (and release if it's a specification only) and return their position via a URL (and a scope if it's a specification)
+    Arguments available: doc_id: string [mandatory], release: integer [optional for every case]
+    """
+    endpoint = DOC3GPPFINDER_BASE + "/find"
+    data = await post_data_to_api(endpoint, doc_id=doc_id, release=release)
+    if isinstance(data, tuple) and data[0] is None:
+        return f"An error while searching publications: {data[1]}"
+    output = f'Document ID: {doc_id}\nURL: {data.get("url", "Not found !")}'
+    output += f'\nScope: {data["scope"]}' if data.get("scope", None) is not None else ""
+    return output
+    
+@mcp.tool()
+async def search_specs(keywords: str, limit: int):
+    """
+    Search 3GPP specifications only by their keywords [note that it will only work with keywords](and some filters [see kwargs field])
+    Arguments available: keywords: string [mandatory, separated by space], limit [mandatory, default = 5]
+    Kwargs available [optional]: (release: integer as string or 'Rel-xxx', wg: string = working group (S1, C4, SP, ...), spec_type: string (either TS or TR), mode: string (either 'and' or 'or') = search mode)
+    """
+    endpoint = DOC3GPPFINDER_BASE + "/search-spec"
+    data = await post_data_to_api(endpoint, keywords=keywords)
+    if isinstance(data, tuple) and data[0] is None:
+        return f"An error has occured while searching specifications"
+    results = data['results'][:min(len(data['results'])-1, limit)]
+    output = []
+    for spec in results:
+        output.append(f"Specification ID: {spec['id']}\nTitle: {spec['title']}\nType: {spec['type']}\nRelease: {spec['release']}\nVersion: {spec['version']}\nWorking Group: {spec['working_group']}\nURL of spec: {spec['url']}\n")
+    
+    return "-\n".join(output)
+
+@mcp.tool()
+async def get_multiple_documents_url(doc_ids: List[str], release: int = None):
+    """
+    [BATCH] Search multiple 3GPP documents (TSG docs, specifications or workshop files) [note that it will only work with document ID] (and release if it's a specification only) and return only their position via a URL
+    Arguments available: doc_ids: list of string [mandatory], release: integer [optional for every case]
+    """
+    endpoint = DOC3GPPFINDER_BASE + "/batch"
+    data = await post_data_to_api(endpoint, doc_ids=doc_ids, release=release)
+    if isinstance(data, tuple) and data[0] is None:
+        return f"An error while searching publications: {data[1]}"
+    results = data["results"]
+    output = []
+    for doc_id, url in results.items():
+        output.append(f'Document ID: {doc_id}\nURL: {url}\n')
+    return "-\n".join(output)
+
+# PTT Endpoints
+
+@mcp.tool()
+async def search_documents_web(query: str, data_type: str = None, limit: int = 5):
+    """
+    Search on the Web (thanks to DuckDuckGo) documents based on the user's query
+    Arguments available: query: string [mandatory], data_type: string [optional, either 'pdf', 'patent' or None (classic web search)], limit: integer [optional, default = 5]
+    """
+    endpoint = DUCKDUCKGO_BASE + "/search"
+    data = await fake_post_data_to_api(endpoint, query=query, data_type=data_type, max_references=limit)
+    if isinstance(data, tuple) and data[0] is None:
+        return f"An error while searching publications: {data[1]}"
+    results = data["results"]
+    output = []
+    for ref in results:
+        output.append(f"Title: {ref['title']}\nBody: {ref['body']}\nURL: {ref['url']}")
+    return "-\n".join(output)
+
+if __name__ == "__main__":
+    mcp.run(transport="stdio")

static/script.js

@@ -0,0 +1,178 @@
+// --- State ---
+let sessionId = null;
+let models = [];
+let currentModel = null;
+
+const REQUEST_LIMIT = 4;
+const REQUEST_WINDOW_MS = 60 * 1000; // 1 minute
+let requestTimestamps = [];
+
+// --- DOM Elements ---
+const modal = document.getElementById('modal');
+const apiKeyInput = document.getElementById('apiKeyInput');
+const loginBtn = document.getElementById('loginBtn');
+const loginError = document.getElementById('loginError');
+const app = document.getElementById('app');
+const chatContainer = document.getElementById('chatContainer');
+const toolToggle = document.getElementById('toolToggle');
+const inputForm = document.getElementById('inputForm');
+const userInput = document.getElementById('userInput');
+const modelSelect = document.getElementById('modelSelect');
+const logoutBtn = document.getElementById('logoutBtn');
+const typingIndicator = document.getElementById('typingIndicator');
+
+let toolUse = true;
+
+// --- Helpers ---
+function canSendRequest() {
+    const now = Date.now();
+    // Remove timestamps older than 1 minute
+    requestTimestamps = requestTimestamps.filter(ts => now - ts < REQUEST_WINDOW_MS);
+    return requestTimestamps.length < REQUEST_LIMIT;
+  }
+  
+  function recordRequest() {
+    requestTimestamps.push(Date.now());
+  }
+
+function scrollToBottom() {
+  chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+function addMessage(text, sender) {
+  const msgDiv = document.createElement('div');
+  msgDiv.className = 'message ' + sender;
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  bubble.textContent = text;
+  msgDiv.appendChild(bubble);
+  chatContainer.appendChild(msgDiv);
+  scrollToBottom();
+}
+
+function setTyping(isTyping) {
+  typingIndicator.classList.toggle('hidden', !isTyping);
+  scrollToBottom();
+}
+
+function showError(msg) {
+  loginError.textContent = msg || '';
+}
+
+toolToggle.addEventListener('change', function() {
+    toolUse = toolToggle.checked;
+  });
+
+// --- Auth & Model Selection ---
+loginBtn.onclick = async function () {
+  const apiKey = apiKeyInput.value.trim();
+  if (!apiKey) { showError('API key required.'); return; }
+  loginBtn.disabled = true;
+  showError('');
+  try {
+    const res = await fetch('/init', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({api_key: apiKey})
+    });
+    const data = await res.json();
+    if (!data.success) { showError(data.error || 'Login failed.'); loginBtn.disabled = false; return; }
+    sessionId = data.session_id;
+    models = data.models || [];
+    // Populate model dropdown
+    modelSelect.innerHTML = '';
+    models.forEach(m => {
+      const opt = document.createElement('option');
+      opt.value = m;
+      opt.textContent = m;
+      modelSelect.appendChild(opt);
+    });
+    currentModel = models[0];
+    modelSelect.value = currentModel;
+    // Show app, hide modal
+    modal.classList.add('hidden');
+    app.classList.remove('hidden');
+    chatContainer.innerHTML = '';
+    userInput.focus();
+  } catch (e) {
+    showError('Network error.');
+    loginBtn.disabled = false;
+  }
+};
+
+modelSelect.onchange = function () {
+  currentModel = modelSelect.value;
+};
+
+// --- Chat Logic ---
+inputForm.onsubmit = async function (e) {
+    e.preventDefault();
+    const text = userInput.value.trim();
+    if (!text) return;
+
+    if (!canSendRequest()) {
+        addMessage('[Rate limit] Please wait: only 4 requests per minute allowed.', 'bot');
+        return;
+      }
+      recordRequest();
+
+    addMessage(text, 'user');
+    userInput.value = '';
+    setTyping(true);
+    try {
+      const res = await fetch('/chat', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+          session_id: sessionId,
+          query: text,
+          tool_use: toolUse, // <-- Use the toggle value here
+          model: currentModel
+        })
+      });
+      const data = await res.json();
+      setTyping(false);
+      if (data.error) {
+        addMessage('[Error] ' + data.error, 'bot');
+        return;
+      }
+      addMessage(data.output, 'bot');
+    } catch (e) {
+      setTyping(false);
+      addMessage('[Network error]', 'bot');
+    }
+  };
+
+// --- Logout Logic ---
+logoutBtn.onclick = async function () {
+  await logoutAndReset();
+};
+
+async function logoutAndReset() {
+  if (sessionId) {
+    try {
+      await fetch('/logout', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({session_id: sessionId})
+      });
+    } catch {}
+    sessionId = null;
+    models = [];
+    currentModel = null;
+  }
+  app.classList.add('hidden');
+  modal.classList.remove('hidden');
+  apiKeyInput.value = '';
+  chatContainer.innerHTML = '';
+  showError('');
+  loginBtn.disabled = false;
+}
+
+// --- Auto logout on exit ---
+window.addEventListener('beforeunload', logoutAndReset);
+
+// --- UX: Enter key in modal input triggers login ---
+apiKeyInput.addEventListener('keyup', function(e) {
+  if (e.key === 'Enter') loginBtn.click();
+});

static/style.css

@@ -0,0 +1,170 @@
+body {
+    font-family: system-ui, sans-serif;
+    margin: 0;
+    background: #f4f6fb;
+  }
+  
+  header {
+    background: #232946;
+    color: #fff;
+    padding: 12px 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    justify-content: space-between;
+  }
+  
+  header select, header button {
+    font-size: 1em;
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: none;
+  }
+  
+  #chatContainer {
+    max-width: 600px;
+    margin: 30px auto 0 auto;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
+    min-height: 400px;
+    padding: 18px 10px 70px 10px;
+    overflow-y: auto;
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .message {
+    display: flex;
+    margin-bottom: 10px;
+    align-items: flex-end;
+  }
+  
+  .message.user {
+    justify-content: flex-end;
+  }
+  
+  .message.bot {
+    justify-content: flex-start;
+  }
+  
+  .bubble {
+    max-width: 70%;
+    padding: 10px 14px;
+    border-radius: 20px;
+    font-size: 1em;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+  
+  .user .bubble {
+    background: #232946;
+    color: #fff;
+    border-bottom-right-radius: 4px;
+  }
+  
+  .bot .bubble {
+    background: #e7eaf6;
+    color: #232946;
+    border-bottom-left-radius: 4px;
+  }
+  
+  #inputForm {
+    position: fixed;
+    left: 0; right: 0; bottom: 0;
+    max-width: 600px;
+    margin: 0 auto;
+    display: flex;
+    gap: 10px;
+    background: #fff;
+    padding: 12px 10px;
+    border-top: 1px solid #e7eaf6;
+  }
+  
+  #userInput {
+    flex: 1;
+    padding: 10px;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    font-size: 1em;
+  }
+  
+  #inputForm button {
+    padding: 0 18px;
+    border-radius: 6px;
+    background: #232946;
+    color: #fff;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+  }
+  
+  .typing {
+    font-size: 0.95em;
+    color: #888;
+    margin-left: 18px;
+    margin-bottom: 8px;
+  }
+  
+  .hidden {
+    display: none !important;
+  }
+  
+  /* Modal */
+  .modal {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.18);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+  
+  .modal-content {
+    background: #fff;
+    padding: 32px 28px 24px 28px;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
+    min-width: 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .modal-content input {
+    padding: 10px;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    font-size: 1em;
+  }
+  
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 1em;
+  color: #fff;
+}
+.toggle-label input[type="checkbox"] {
+  accent-color: #232946;
+  width: 16px;
+  height: 16px;
+}
+  .modal-content button {
+    padding: 8px 0;
+    border-radius: 6px;
+    background: #232946;
+    color: #fff;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+  }
+  
+  .error {
+    color: #c00;
+    font-size: 0.95em;
+    min-height: 18px;
+  }
+