Update app.py

app.py

@@ -7,180 +7,196 @@ from openai import OpenAI
 from pypdf import PdfReader
 from sentence_transformers import SentenceTransformer
 
-css = """
-
-/* ================================================================
-   DEUTSCHE TELEKOM — FINANCE RAG SYSTEM
-   Corporate Magenta · Clean · Professional · Premium
-   ================================================================ */
+# ================================================================
+#  TELEKOM FINANCE RAG — Premium Dark Theme
+#  Deutsche Telekom Corporate Magenta · Sora · DM Mono
+# ================================================================
 
+css = """
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Mono:wght@400;500&display=swap');
 
 :root {
-  --magenta:         #E20074;
-  --magenta-dark:    #B5005C;
-  --magenta-light:   #FF3399;
-  --magenta-pale:    #FFE6F2;
-  --black:           #0A0A0A;
-  --dark:            #111111;
-  --grey-900:        #1A1A1A;
-  --grey-800:        #242424;
-  --grey-700:        #3A3A3A;
-  --grey-400:        #888888;
-  --grey-200:        #EBEBEB;
-  --grey-100:        #F5F5F5;
-  --white:           #FFFFFF;
-  --success:         #00C896;
-  --warning:         #FFB700;
-
-  --font-main:       'Sora', sans-serif;
-  --font-mono:       'DM Mono', monospace;
-
-  --radius-sm:       4px;
-  --radius-md:       8px;
-  --radius-lg:       16px;
-  --radius-xl:       24px;
-
-  --shadow-sm:       0 1px 4px rgba(0,0,0,0.12);
-  --shadow-md:       0 4px 20px rgba(0,0,0,0.15);
-  --shadow-lg:       0 8px 40px rgba(0,0,0,0.20);
-  --shadow-magenta:  0 4px 24px rgba(226,0,116,0.25);
+  --magenta:        #E20074;
+  --magenta-dark:   #B5005C;
+  --magenta-glow:   rgba(226,0,116,0.22);
+  --bg:             #0D0D0D;
+  --surface:        #161616;
+  --surface-2:      #1E1E1E;
+  --surface-3:      #272727;
+  --border:         #2A2A2A;
+  --border-accent:  #3A3A3A;
+  --text-primary:   #F0F0F0;
+  --text-secondary: #888888;
+  --text-muted:     #555555;
+  --success:        #00C896;
+  --mono:           'DM Mono', monospace;
+  --sans:           'Sora', sans-serif;
+  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;
 }
 
-/* ---- RESET & BASE ---- */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* RESET */
+*, *::before, *::after { box-sizing: border-box; }
 
+/* BASE */
 body {
-  font-family: var(--font-main) !important;
-  background: #0D0D0D !important;
-  color: var(--white) !important;
-  min-height: 100vh;
+  font-family: var(--sans) !important;
+  background: var(--bg) !important;
+  color: var(--text-primary) !important;
   background-image:
-    radial-gradient(ellipse 80% 60% at 10% -10%, rgba(226,0,116,0.12) 0%, transparent 60%),
-    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(226,0,116,0.08) 0%, transparent 50%);
+    radial-gradient(ellipse 70% 50% at 5% 0%, rgba(226,0,116,0.10) 0%, transparent 55%),
+    radial-gradient(ellipse 50% 40% at 95% 100%, rgba(226,0,116,0.07) 0%, transparent 50%);
 }
 
-/* ---- MAIN CONTAINER ---- */
+/* CONTAINER */
 .gradio-container {
-  max-width: 1100px !important;
+  max-width: 1080px !important;
   margin: 0 auto !important;
-  padding: 0 !important;
+  padding: 0 20px 48px !important;
   background: transparent !important;
   box-shadow: none !important;
 }
 
-/* ---- HEADER BAND ---- */
-.gr-markdown:first-of-type {
-  background: linear-gradient(135deg, var(--magenta) 0%, #B5005C 100%) !important;
-  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
-  padding: 36px 48px 32px !important;
-  margin-bottom: 32px !important;
-  box-shadow: var(--shadow-magenta) !important;
+/* ── HEADER CARD ── */
+.header-card {
+  background: linear-gradient(145deg, #1A0010 0%, #0D0D0D 60%);
+  border: 1px solid var(--border-accent);
+  border-top: 3px solid var(--magenta);
+  border-radius: 0 0 var(--r-xl) var(--r-xl);
+  padding: 36px 48px 32px;
+  margin-bottom: 28px;
   position: relative;
   overflow: hidden;
 }
 
-.gr-markdown:first-of-type::before {
+.header-card::before {
   content: '';
   position: absolute;
-  top: -60px; right: -60px;
-  width: 220px; height: 220px;
+  top: -80px; right: -80px;
+  width: 300px; height: 300px;
   border-radius: 50%;
-  background: rgba(255,255,255,0.08);
+  background: radial-gradient(circle, rgba(226,0,116,0.15) 0%, transparent 70%);
+  pointer-events: none;
 }
 
-.gr-markdown:first-of-type::after {
+/* BIG T watermark */
+.header-card::after {
   content: 'T';
   position: absolute;
-  right: 40px; bottom: -20px;
-  font-family: var(--font-main);
-  font-size: 140px;
-  font-weight: 800;
-  color: rgba(255,255,255,0.07);
+  right: 36px; bottom: -28px;
+  font-family: var(--sans);
+  font-size: 160px; font-weight: 800;
+  color: rgba(226,0,116,0.06);
   line-height: 1;
-  pointer-events: none;
-  user-select: none;
+  pointer-events: none; user-select: none;
 }
 
-/* ---- MARKDOWN HEADINGS ---- */
-h1 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -0.5px !important; }
-h2 { font-size: 1.4rem !important; font-weight: 700 !important; }
-h3 { font-size: 1.1rem !important; font-weight: 600 !important; }
+.header-title {
+  font-size: 1.85rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+  color: var(--text-primary);
+  margin: 0 0 8px;
+}
+
+.header-title span { color: var(--magenta); }
+
+.header-sub {
+  font-size: 0.82rem;
+  font-weight: 400;
+  color: var(--text-secondary);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.header-logo {
+  width: 52px; height: 52px;
+  border-radius: var(--r-md);
+  object-fit: cover;
+  border: 2px solid rgba(226,0,116,0.4);
+  margin-right: 18px;
+}
+
+.header-flex {
+  display: flex;
+  align-items: center;
+}
 
-/* ---- CARD PANELS ---- */
+/* ── PANELS ── */
 .gr-box, .gr-panel, .gr-group, .gr-form,
-[class*="panel"], [class*="block"], .gap {
-  background: var(--grey-900) !important;
-  border: 1px solid var(--grey-800) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--shadow-sm) !important;
+[class*="panel"], [class*="block"] {
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--r-lg) !important;
 }
 
-/* ---- LABELS ---- */
+/* ── LABELS ── */
 label, .gr-label, .label-wrap span {
-  font-family: var(--font-main) !important;
-  font-size: 0.72rem !important;
-  font-weight: 600 !important;
-  letter-spacing: 0.08em !important;
+  font-family: var(--sans) !important;
+  font-size: 0.68rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.10em !important;
   text-transform: uppercase !important;
-  color: var(--grey-400) !important;
-  margin-bottom: 6px !important;
+  color: var(--text-secondary) !important;
 }
 
-/* ---- TEXTBOXES / INPUTS ---- */
+/* ── INPUTS ── */
 textarea, input[type="text"] {
-  font-family: var(--font-main) !important;
-  background: var(--grey-800) !important;
-  color: var(--white) !important;
-  border: 1px solid var(--grey-700) !important;
-  border-radius: var(--radius-md) !important;
+  font-family: var(--sans) !important;
+  background: var(--surface-2) !important;
+  color: var(--text-primary) !important;
+  border: 1px solid var(--border-accent) !important;
+  border-radius: var(--r-md) !important;
   padding: 12px 16px !important;
-  font-size: 0.9rem !important;
-  transition: border-color 0.2s, box-shadow 0.2s !important;
-  outline: none !important;
+  font-size: 0.88rem !important;
+  line-height: 1.5 !important;
+  transition: border-color 0.18s, box-shadow 0.18s !important;
 }
 
 textarea:focus, input[type="text"]:focus {
   border-color: var(--magenta) !important;
-  box-shadow: 0 0 0 3px rgba(226,0,116,0.15) !important;
+  box-shadow: 0 0 0 3px var(--magenta-glow) !important;
+  outline: none !important;
 }
 
 textarea::placeholder, input[type="text"]::placeholder {
-  color: var(--grey-400) !important;
-  font-style: italic;
+  color: var(--text-muted) !important;
+}
+
+/* Chat input special */
+.message-input textarea {
+  border-radius: var(--r-md) !important;
+  min-height: 52px !important;
+  resize: none !important;
 }
 
-/* ---- BUTTONS ---- */
+/* Status readonly */
+textarea[readonly] {
+  font-family: var(--mono) !important;
+  font-size: 0.78rem !important;
+  color: var(--success) !important;
+  background: var(--surface-2) !important;
+  border-color: rgba(0,200,150,0.25) !important;
+}
+
+/* ── BUTTONS ── */
 button, .gr-button {
-  font-family: var(--font-main) !important;
+  font-family: var(--sans) !important;
   font-weight: 700 !important;
-  font-size: 0.85rem !important;
-  letter-spacing: 0.04em !important;
+  font-size: 0.78rem !important;
+  letter-spacing: 0.08em !important;
   text-transform: uppercase !important;
-  padding: 12px 28px !important;
-  border-radius: var(--radius-md) !important;
+  border-radius: var(--r-md) !important;
+  padding: 11px 24px !important;
   border: none !important;
   cursor: pointer !important;
-  transition: all 0.2s ease !important;
-  position: relative;
-  overflow: hidden;
+  transition: all 0.18s ease !important;
 }
 
-button::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(255,255,255,0);
-  transition: background 0.2s;
-}
-
-button:hover::after { background: rgba(255,255,255,0.08) !important; }
-
-/* Primary */
 button.primary, .gr-button-primary, button[variant="primary"] {
   background: var(--magenta) !important;
-  color: var(--white) !important;
-  box-shadow: var(--shadow-magenta) !important;
+  color: #fff !important;
+  box-shadow: 0 4px 20px var(--magenta-glow) !important;
 }
 
 button.primary:hover, .gr-button-primary:hover {
@@ -189,220 +205,256 @@ button.primary:hover, .gr-button-primary:hover {
   transform: translateY(-1px) !important;
 }
 
-/* Secondary / Ghost */
 button.secondary, .gr-button-secondary {
   background: transparent !important;
   color: var(--magenta) !important;
   border: 1.5px solid var(--magenta) !important;
 }
 
-/* ---- CHATBOT ---- */
-.gr-chatbot, [data-testid="chatbot"], .chatbot {
-  background: var(--grey-900) !important;
-  border: 1px solid var(--grey-800) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--shadow-md) !important;
-  font-family: var(--font-main) !important;
+/* ── CHATBOT ── */
+.gr-chatbot, [data-testid="chatbot"] {
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--r-lg) !important;
+  font-family: var(--sans) !important;
 }
 
-/* User message bubble */
-.message.user, [data-testid="user"] .message,
-.gr-chatbot .user .message, div[class*="user"] {
-  background: linear-gradient(135deg, var(--magenta) 0%, #B5005C 100%) !important;
-  color: var(--white) !important;
-  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md) !important;
-  padding: 12px 16px !important;
-  font-size: 0.88rem !important;
-  line-height: 1.6 !important;
-  box-shadow: 0 2px 12px rgba(226,0,116,0.25) !important;
-  max-width: 75% !important;
+/* User bubble */
+.message.user,
+[data-testid="user"] .message {
+  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-dark) 100%) !important;
+  color: #fff !important;
+  border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-md) !important;
+  padding: 11px 16px !important;
+  font-size: 0.86rem !important;
+  line-height: 1.65 !important;
+  box-shadow: 0 2px 14px rgba(226,0,116,0.20) !important;
+  max-width: 74% !important;
   margin-left: auto !important;
 }
 
-/* Bot / assistant message bubble */
-.message.bot, [data-testid="bot"] .message,
-.gr-chatbot .bot .message, div[class*="bot"] {
-  background: var(--grey-800) !important;
-  color: var(--grey-100) !important;
-  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm) !important;
+/* Bot bubble */
+.message.bot,
+[data-testid="bot"] .message {
+  background: var(--surface-2) !important;
+  color: var(--text-primary) !important;
+  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-sm) !important;
   border-left: 3px solid var(--magenta) !important;
-  padding: 12px 16px !important;
-  font-size: 0.88rem !important;
-  line-height: 1.6 !important;
+  padding: 11px 16px !important;
+  font-size: 0.86rem !important;
+  line-height: 1.65 !important;
   max-width: 80% !important;
 }
 
-/* Avatar / icons */
-.avatar-container img { border-radius: 50% !important; }
-
-/* ---- STATUS BOX ---- */
-.gr-textbox[readonly] textarea,
-textarea[readonly] {
-  background: var(--grey-800) !important;
-  border-color: var(--grey-700) !important;
-  color: var(--success) !important;
-  font-family: var(--font-mono) !important;
-  font-size: 0.82rem !important;
-}
-
-/* ---- DIVIDERS ---- */
-.gr-padded { padding: 20px !important; }
+/* ── DIVIDER / ROW ── */
 .gap { gap: 16px !important; }
 
-/* ---- SCROLLBAR ---- */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--grey-900); border-radius: 3px; }
-::-webkit-scrollbar-thumb { background: var(--grey-700); border-radius: 3px; }
+/* ── SCROLLBAR ── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: var(--surface); }
+::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--magenta); }
 
-/* ---- FOOTER ---- */
-footer { display: none !important; }
-
-/* ---- ANIMATIONS ---- */
+/* ── ANIMATION ── */
 @keyframes fadeUp {
-  from { opacity: 0; transform: translateY(12px); }
+  from { opacity: 0; transform: translateY(10px); }
   to   { opacity: 1; transform: translateY(0); }
 }
+.gr-chatbot .message { animation: fadeUp 0.22s ease both; }
 
-.gr-chatbot .message { animation: fadeUp 0.25s ease both; }
+/* ── HIDE FOOTER ── */
+footer { display: none !important; }
 
-/* ---- RESPONSIVE ---- */
-@media (max-width: 768px) {
-  .gradio-container { padding: 0 8px !important; }
-  h1 { font-size: 1.5rem !important; }
+/* ── RESPONSIVE ── */
+@media (max-width: 700px) {
+  .header-card { padding: 24px 20px 20px; }
+  .header-title { font-size: 1.3rem; }
 }
 """
 
-# Globals (shared state in Gradio)
+# ── GLOBALS ────────────────────────────────────────────────────────────────────
 embed_model = SentenceTransformer("all-MiniLM-L6-v2")
-index = None
+index  = None
 chunks = []
-
-# Add after globals:
-# Session memory
-
 chat_history = []
 
-def chat(user_input, history):
-    global chat_history
-    
-    # Build full context (PDF + conversation history)
-    full_context = "\n".join([
-        f"User: {h['user']}\nBot: {h['bot']}"
-        for h in chat_history[-5:]
-    ]) if chat_history else ""
-    
-    answer = generate_answer(user_input, full_context)
-    
-    # Store in memory
-    chat_history.append({
-        "user": user_input,
-        "bot": answer
-    })
-    
-    # Update UI history
-    new_history = history + [
-        {"role": "user", "content": user_input},
-        {"role": "assistant", "content": answer}
-    ]
-    
-    return new_history, new_history
-def generate_answer(query, conversation_context=""):
-    if index is None:
-        return "⚠️ Please load a PDF first."
-    
-    rag_context = retrieve(query)
-    rag_text = "\n\n".join(rag_context)
-    
-    # ✅ Combine RAG + Conversation Memory
-    full_prompt = f"""You are a smart financial AI assistant that remembers conversations.
-
-Previous conversation:
-{conversation_context}
-
-PDF Context (use ONLY this for facts):
-{rag_text}
-
-Question: {query}
-
-Respond naturally and helpfully, referencing past discussion when relevant."""
-    
-    response = client.chat.completions.create(
-        model="llama-3.1-8b-instant",
-        messages=[{"role": "user", "content": full_prompt}],
-        temperature=0.7,
-        max_tokens=600
-    )
-    return response.choices[0].message.content
-
-# Groq client with HF Secrets
+# ── GROQ CLIENT ────────────────────────────────────────────────────────────────
 client = OpenAI(
     api_key=os.getenv("GROQ_API_KEY"),
     base_url="https://api.groq.com/openai/v1",
 )
 
-def convert_drive_link(link):
+# ── HELPERS ────────────────────────────────────────────────────────────────────
+def convert_drive_link(link: str) -> str:
     try:
         file_id = link.split("/d/")[1].split("/")[0]
         return f"https://drive.google.com/uc?id={file_id}"
-    except:
+    except Exception:
         return link
 
-def load_pdf_from_link(link):
+
+def load_pdf_from_link(link: str) -> str:
     global index, chunks
-    url = convert_drive_link(link)
-    PDF_PATH = "temp.pdf"
-    response = requests.get(url)
-    with open(PDF_PATH, "wb") as f:
-        f.write(response.content)
-    
-    reader = PdfReader(PDF_PATH)
-    texts = [page.extract_text() for page in reader.pages if page.extract_text()]
-    
-    # Chunking
+    url      = convert_drive_link(link)
+    pdf_path = "temp.pdf"
+
+    resp = requests.get(url, timeout=30)
+    with open(pdf_path, "wb") as f:
+        f.write(resp.content)
+
+    reader = PdfReader(pdf_path)
+    texts  = [p.extract_text() for p in reader.pages if p.extract_text()]
+
     chunks = []
     for t in texts:
         words = t.split()
         for i in range(0, len(words), 500):
-            chunks.append(" ".join(words[i:i+500]))
-    
-    # Embeddings + FAISS
+            chunks.append(" ".join(words[i : i + 500]))
+
     embeddings = embed_model.encode(chunks)
-    dim = embeddings.shape[1]
-    index = faiss.IndexFlatL2(dim)
-    index.add(np.array(embeddings).astype('float32'))
-    
-    return f"✅ PDF loaded! {len(chunks)} chunks created."
+    dim        = embeddings.shape[1]
+    index      = faiss.IndexFlatL2(dim)
+    index.add(np.array(embeddings, dtype="float32"))
 
-def retrieve(query, k=3):
+    return f"✅  Loaded successfully — {len(chunks)} chunks indexed from {len(texts)} pages."
+
+
+def retrieve(query: str, k: int = 3) -> list[str]:
     if index is None:
         return []
-    q_emb = embed_model.encode([query])
-    distances, indices = index.search(np.array(q_emb).astype('float32'), k)
-    return [chunks[i] for i in indices[0]]
-    
-# ... (keep all previous code until chat function)
-# UI (replace entirely):
-with gr.Blocks(title="Finance RAG", css=css) as app:
-    gr.Markdown("# 📊 Dynamic Finance RAG Chatbot")
-    
-    with gr.Row():
-        link_input = gr.Textbox(label="📎 Google Drive PDF Link", placeholder="https://drive.google.com/file/d/...")
-        load_btn = gr.Button("📥 Load PDF", variant="primary")
-    
-    status = gr.Textbox(label="Status", interactive=False)
-    
-    chatbot = gr.Chatbot(height=500)
-    msg = gr.Textbox(
-        label="💬 Ask about the PDF", 
-        placeholder="What are the key financial metrics?",
-        container=True
+    q_emb               = embed_model.encode([query])
+    distances, indices_ = index.search(np.array(q_emb, dtype="float32"), k)
+    return [chunks[i] for i in indices_[0]]
+
+
+def generate_answer(query: str, conversation_context: str = "") -> str:
+    if index is None:
+        return "⚠️  Please load a PDF first using the panel above."
+
+    rag_context = retrieve(query)
+    rag_text    = "\n\n".join(rag_context)
+
+    prompt = f"""You are a senior financial analyst AI assistant for Deutsche Telekom.
+You have access to official financial report data and maintain conversation context.
+
+Previous conversation:
+{conversation_context}
+
+PDF Context — use ONLY this for factual claims:
+{rag_text}
+
+User question: {query}
+
+Respond with precision and confidence. Reference prior conversation when relevant.
+Use clear structure (short paragraphs or bullet points where helpful)."""
+
+    response = client.chat.completions.create(
+        model="llama-3.1-8b-instant",
+        messages=[{"role": "user", "content": prompt}],
+        temperature=0.5,
+        max_tokens=700,
+    )
+    return response.choices[0].message.content
+
+
+def chat(user_input: str, history: list) -> tuple:
+    global chat_history
+
+    ctx = "\n".join(
+        f"User: {h['user']}\nAssistant: {h['bot']}"
+        for h in chat_history[-5:]
+    )
+
+    answer = generate_answer(user_input, ctx)
+
+    chat_history.append({"user": user_input, "bot": answer})
+
+    new_history = history + [
+        {"role": "user",      "content": user_input},
+        {"role": "assistant", "content": answer},
+    ]
+    return new_history, new_history
+
+
+# ── LOGO (base64 inline or URL fallback) ───────────────────────────────────────
+LOGO_URL = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Deutsche_Telekom_logo_simple.svg/120px-Deutsche_Telekom_logo_simple.svg.png"
+
+# ── UI ─────────────────────────────────────────────────────────────────────────
+with gr.Blocks(title="Telekom Finance RAG", css=css) as app:
+
+    # ── Header ────────────────────────────────────────────────────────────────
+    gr.HTML(f"""
+    <div class="header-card">
+      <div class="header-flex">
+        <img class="header-logo" src="{LOGO_URL}" alt="Telekom Logo" onerror="this.style.display='none'">
+        <div>
+          <div class="header-title">Finance <span>RAG</span> Intelligence</div>
+          <div class="header-sub">Deutsche Telekom · AI-Powered Document Analysis · {{}}</div>
+        </div>
+      </div>
+    </div>
+    """)
+
+    # ── PDF Loader Row ─────────────────────────────────────────────────────────
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=5):
+            link_input = gr.Textbox(
+                label="📎  Google Drive PDF Link",
+                placeholder="https://drive.google.com/file/d/xxxxxxx/view",
+            )
+        with gr.Column(scale=1, min_width=140):
+            load_btn = gr.Button("📥  Load PDF", variant="primary")
+
+    status = gr.Textbox(
+        label="System Status",
+        interactive=False,
+        placeholder="Waiting for PDF…",
+    )
+
+    gr.HTML("<div style='height:4px;background:linear-gradient(90deg,#E20074 0%,transparent 100%);border-radius:2px;margin:8px 0 20px;opacity:0.5'></div>")
+
+    # ── Chat Section ───────────────────────────────────────────────────────────
+    gr.HTML("<div style='font-size:0.68rem;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:#888;margin-bottom:12px'>💬 &nbsp;Conversation</div>")
+
+    chatbot = gr.Chatbot(
+        height=480,
+        show_label=False,
+        avatar_images=(None, LOGO_URL),
     )
-    
-    # Events
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=7):
+            msg = gr.Textbox(
+                show_label=False,
+                placeholder="Ask about revenue, EBITDA, KPIs, strategic outlook…",
+                container=False,
+                elem_classes=["message-input"],
+            )
+        with gr.Column(scale=1, min_width=110):
+            send_btn = gr.Button("Send ↑", variant="primary")
+
+    gr.HTML("""
+    <div style='margin-top:28px;padding:16px 20px;background:#161616;border:1px solid #2A2A2A;
+         border-radius:10px;display:flex;gap:32px;flex-wrap:wrap'>
+      <div style='font-size:0.7rem;color:#555;letter-spacing:0.06em;text-transform:uppercase'>
+        Powered by&nbsp;<span style='color:#E20074;font-weight:700'>Groq · LLaMA 3</span>
+        &nbsp;+&nbsp;<span style='color:#E20074;font-weight:700'>FAISS · MiniLM</span>
+      </div>
+      <div style='font-size:0.7rem;color:#555;letter-spacing:0.06em;text-transform:uppercase;margin-left:auto'>
+        Deutsche Telekom AG · Confidential
+      </div>
+    </div>
+    """)
+
+    # ── Events ─────────────────────────────────────────────────────────────────
     load_btn.click(load_pdf_from_link, inputs=link_input, outputs=status)
-    msg.submit(chat, inputs=[msg, chatbot], outputs=[chatbot, chatbot])
+
+    msg.submit(chat,     inputs=[msg, chatbot], outputs=[chatbot, chatbot])
     msg.submit(lambda: "", outputs=msg)
 
+    send_btn.click(chat, inputs=[msg, chatbot], outputs=[chatbot, chatbot])
+    send_btn.click(lambda: "", outputs=msg)
+
+
 if __name__ == "__main__":
     app.launch()