Update app.py

app.py

@@ -7,454 +7,367 @@ from openai import OpenAI
 from pypdf import PdfReader
 from sentence_transformers import SentenceTransformer
 
-# ================================================================
-#  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-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;
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
+*,*::before,*::after{box-sizing:border-box}
+
+:root{
+  --M:#E20074;--MD:#B5005C;
+  --BG:#080008;
+  --glass:rgba(255,255,255,0.04);
+  --glass-b:rgba(255,255,255,0.09);
+  --text:#F2F2F2;--muted:#888;--dim:#444;
+  --ok:#00C896;
+  --f:'Plus Jakarta Sans',sans-serif;
+  --mono:'JetBrains Mono',monospace;
+  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;
 }
 
-/* RESET */
-*, *::before, *::after { box-sizing: border-box; }
-
-/* BASE */
-body {
-  font-family: var(--sans) !important;
-  background: var(--bg) !important;
-  color: var(--text-primary) !important;
-  background-image:
-    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%);
+body{
+  font-family:var(--f)!important;
+  background:var(--BG)!important;
+  color:var(--text)!important;
+  position:relative;overflow-x:hidden;
 }
 
-/* CONTAINER */
-.gradio-container {
-  max-width: 1080px !important;
-  margin: 0 auto !important;
-  padding: 0 20px 48px !important;
-  background: transparent !important;
-  box-shadow: none !important;
+body::before{
+  content:'';position:fixed;inset:0;
+  background:
+    radial-gradient(ellipse 55% 40% at 10% 5%,rgba(226,0,116,0.18) 0%,transparent 60%),
+    radial-gradient(ellipse 40% 35% at 88% 85%,rgba(226,0,116,0.12) 0%,transparent 55%),
+    radial-gradient(ellipse 35% 30% at 70% 15%,rgba(100,0,50,0.14) 0%,transparent 50%);
+  animation:meshDrift 10s ease-in-out infinite alternate;
+  pointer-events:none;z-index:0;
 }
-
-/* ── 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;
+@keyframes meshDrift{
+  0%{opacity:1;transform:scale(1)}
+  100%{opacity:.8;transform:scale(1.04) translate(1%,1%)}
 }
 
-.header-card::before {
-  content: '';
-  position: absolute;
-  top: -80px; right: -80px;
-  width: 300px; height: 300px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(226,0,116,0.15) 0%, transparent 70%);
-  pointer-events: none;
+body::after{
+  content:'';position:fixed;inset:0;
+  background-image:
+    linear-gradient(rgba(226,0,116,0.034) 1px,transparent 1px),
+    linear-gradient(90deg,rgba(226,0,116,0.034) 1px,transparent 1px);
+  background-size:44px 44px;
+  pointer-events:none;z-index:0;
 }
 
-/* BIG T watermark */
-.header-card::after {
-  content: 'T';
-  position: absolute;
-  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;
+.gradio-container{
+  max-width:1080px!important;margin:0 auto!important;
+  padding:0 24px 48px!important;
+  background:transparent!important;box-shadow:none!important;
+  position:relative;z-index:1;
 }
 
-.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 */
+.app-header{
+  background:linear-gradient(145deg,rgba(40,0,20,.92) 0%,rgba(15,0,8,.96) 70%);
+  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+  border:1px solid rgba(226,0,116,0.25);border-top:3px solid var(--M);
+  border-radius:0 0 var(--r-xl) var(--r-xl);
+  padding:28px 40px 26px;margin-bottom:24px;
+  display:flex;align-items:center;justify-content:space-between;
+  position:relative;overflow:hidden;
 }
-
-.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;
+.app-header::after{
+  content:'T';position:absolute;right:24px;bottom:-32px;
+  font-family:var(--f);font-size:160px;font-weight:800;
+  color:rgba(226,0,116,0.06);line-height:1;
+  pointer-events:none;user-select:none;
 }
-
-.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-brand{display:flex;align-items:center;gap:16px}
+.t-logo{
+  width:52px;height:52px;border-radius:14px;
+  background:linear-gradient(145deg,#E20074,#800040);
+  display:flex;align-items:center;justify-content:center;
+  font-size:26px;font-weight:800;color:#fff;
+  box-shadow:0 0 28px rgba(226,0,116,0.45),0 4px 12px rgba(0,0,0,.4);
+  flex-shrink:0;font-family:var(--f);
 }
-
-.header-flex {
-  display: flex;
-  align-items: center;
+.header-title{font-size:1.35rem;font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.2}
+.header-title em{
+  font-style:normal;
+  background:linear-gradient(135deg,#E20074,#FF6BB5);
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
 }
-
-/* ── PANELS ── */
-.gr-box, .gr-panel, .gr-group, .gr-form,
-[class*="panel"], [class*="block"] {
-  background: var(--surface) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: var(--r-lg) !important;
+.header-sub{font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
+.status-pill{
+  display:flex;align-items:center;gap:8px;
+  background:rgba(0,200,150,.08);border:1px solid rgba(0,200,150,.22);
+  border-radius:99px;padding:8px 16px;flex-shrink:0;
 }
-
-/* ── LABELS ── */
-label, .gr-label, .label-wrap span {
-  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(--text-secondary) !important;
+.pulse-dot{
+  width:8px;height:8px;border-radius:50%;background:var(--ok);
+  animation:pDot 2.2s ease-in-out infinite;
 }
-
-/* ── INPUTS ── */
-textarea, input[type="text"] {
-  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.88rem !important;
-  line-height: 1.5 !important;
-  transition: border-color 0.18s, box-shadow 0.18s !important;
+@keyframes pDot{
+  0%,100%{box-shadow:0 0 0 0 rgba(0,200,150,.5)}
+  50%{box-shadow:0 0 0 7px rgba(0,200,150,0)}
 }
-
-textarea:focus, input[type="text"]:focus {
-  border-color: var(--magenta) !important;
-  box-shadow: 0 0 0 3px var(--magenta-glow) !important;
-  outline: none !important;
+.status-label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
+
+/* CHIPS */
+.info-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
+.chip{
+  display:flex;align-items:center;gap:7px;
+  background:var(--glass);border:1px solid var(--glass-b);
+  border-radius:99px;padding:6px 14px;
+  font-size:.65rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
+  transition:border-color .2s;
 }
-
-textarea::placeholder, input[type="text"]::placeholder {
-  color: var(--text-muted) !important;
+.chip:hover{border-color:rgba(226,0,116,.35)}
+.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--M);flex-shrink:0}
+
+/* SECTION LABEL */
+.section-label{
+  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
+  color:var(--muted);margin-bottom:10px;
+  display:flex;align-items:center;gap:8px;
 }
-
-/* Chat input special */
-.message-input textarea {
-  border-radius: var(--r-md) !important;
-  min-height: 52px !important;
-  resize: none !important;
+.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(226,0,116,.3),transparent)}
+
+/* GLASS CARDS */
+.gr-box,.gr-panel,.gr-group,.gr-form,[class*="panel"],[class*="block"]{
+  background:var(--glass)!important;
+  border:1px solid var(--glass-b)!important;
+  border-radius:var(--r-md)!important;
+  backdrop-filter:blur(12px)!important;
+  -webkit-backdrop-filter:blur(12px)!important;
+  transition:border-color .2s!important;
 }
+.gr-box:hover,.gr-panel:hover{border-color:rgba(226,0,116,.28)!important}
 
-/* 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;
+/* LABELS */
+label,.gr-label,.label-wrap span{
+  font-family:var(--f)!important;font-size:.62rem!important;font-weight:700!important;
+  letter-spacing:.10em!important;text-transform:uppercase!important;color:var(--muted)!important;
 }
 
-/* ── BUTTONS ── */
-button, .gr-button {
-  font-family: var(--sans) !important;
-  font-weight: 700 !important;
-  font-size: 0.78rem !important;
-  letter-spacing: 0.08em !important;
-  text-transform: uppercase !important;
-  border-radius: var(--r-md) !important;
-  padding: 11px 24px !important;
-  border: none !important;
-  cursor: pointer !important;
-  transition: all 0.18s ease !important;
+/* INPUTS */
+textarea,input[type="text"]{
+  font-family:var(--f)!important;background:var(--glass)!important;
+  color:var(--text)!important;border:1px solid var(--glass-b)!important;
+  border-radius:var(--r-sm)!important;padding:12px 15px!important;
+  font-size:.86rem!important;line-height:1.55!important;
+  transition:border-color .2s,box-shadow .2s!important;
 }
-
-button.primary, .gr-button-primary, button[variant="primary"] {
-  background: var(--magenta) !important;
-  color: #fff !important;
-  box-shadow: 0 4px 20px var(--magenta-glow) !important;
+textarea:focus,input[type="text"]:focus{
+  border-color:var(--M)!important;
+  box-shadow:0 0 0 3px rgba(226,0,116,.14)!important;outline:none!important;
 }
-
-button.primary:hover, .gr-button-primary:hover {
-  background: var(--magenta-dark) !important;
-  box-shadow: 0 6px 28px rgba(226,0,116,0.40) !important;
-  transform: translateY(-1px) !important;
+textarea::placeholder,input[type="text"]::placeholder{color:var(--dim)!important;font-style:italic!important}
+textarea[readonly]{
+  font-family:var(--mono)!important;font-size:.75rem!important;
+  color:var(--ok)!important;background:rgba(0,200,150,.05)!important;
+  border-color:rgba(0,200,150,.18)!important;
 }
 
-button.secondary, .gr-button-secondary {
-  background: transparent !important;
-  color: var(--magenta) !important;
-  border: 1.5px solid var(--magenta) !important;
+/* BUTTONS */
+button,.gr-button{
+  font-family:var(--f)!important;font-weight:700!important;font-size:.74rem!important;
+  letter-spacing:.09em!important;text-transform:uppercase!important;
+  border-radius:var(--r-sm)!important;padding:12px 24px!important;
+  border:none!important;cursor:pointer!important;transition:all .2s ease!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;
+button.primary,.gr-button-primary,button[variant="primary"]{
+  background:linear-gradient(135deg,#E20074 0%,#B5005C 100%)!important;
+  color:#fff!important;box-shadow:0 4px 22px rgba(226,0,116,.35)!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;
+button.primary:hover,.gr-button-primary:hover{
+  box-shadow:0 6px 32px rgba(226,0,116,.55)!important;transform:translateY(-2px)!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: 11px 16px !important;
-  font-size: 0.86rem !important;
-  line-height: 1.65 !important;
-  max-width: 80% !important;
+button.secondary,.gr-button-secondary{
+  background:transparent!important;color:var(--M)!important;
+  border:1px solid rgba(226,0,116,.4)!important;
 }
+button.secondary:hover{background:rgba(226,0,116,.08)!important}
 
-/* ── DIVIDER / ROW ── */
-.gap { gap: 16px !important; }
-
-/* ── 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); }
-
-/* ── ANIMATION ── */
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0); }
+/* CHATBOT */
+.gr-chatbot,[data-testid="chatbot"]{
+  background:rgba(255,255,255,.03)!important;
+  border:1px solid rgba(255,255,255,.08)!important;
+  border-radius:var(--r-md)!important;backdrop-filter:blur(12px)!important;
 }
-.gr-chatbot .message { animation: fadeUp 0.22s ease both; }
-
-/* ── HIDE FOOTER ── */
-footer { display: none !important; }
-
-/* ── RESPONSIVE ── */
-@media (max-width: 700px) {
-  .header-card { padding: 24px 20px 20px; }
-  .header-title { font-size: 1.3rem; }
+.message.user,[data-testid="user"] .message{
+  background:linear-gradient(135deg,#E20074 0%,#B5005C 100%)!important;
+  color:#fff!important;border-radius:12px 12px 3px 12px!important;
+  padding:11px 15px!important;font-size:.84rem!important;line-height:1.65!important;
+  max-width:74%!important;margin-left:auto!important;
+  box-shadow:0 4px 18px rgba(226,0,116,.28)!important;
+  animation:slideInR .24s ease!important;
+}
+.message.bot,[data-testid="bot"] .message{
+  background:rgba(255,255,255,.05)!important;
+  border:1px solid rgba(255,255,255,.09)!important;
+  border-left:3px solid var(--M)!important;
+  color:var(--text)!important;border-radius:3px 12px 12px 12px!important;
+  padding:11px 15px!important;font-size:.84rem!important;line-height:1.65!important;
+  max-width:80%!important;animation:slideInL .24s ease!important;
+}
+@keyframes slideInR{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
+@keyframes slideInL{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
+
+/* SCROLLBAR */
+::-webkit-scrollbar{width:4px;height:4px}
+::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
+::-webkit-scrollbar-thumb{background:rgba(226,0,116,.3);border-radius:2px}
+::-webkit-scrollbar-thumb:hover{background:var(--M)}
+
+/* FOOTER */
+.app-footer{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:16px 0 0;border-top:1px solid rgba(255,255,255,.06);margin-top:8px;
 }
+.f-text{font-size:.62rem;color:var(--dim)}
+.f-text span{color:var(--M);font-weight:600}
+footer{display:none!important}
+.gap{gap:16px!important}
 """
 
 # ── GLOBALS ────────────────────────────────────────────────────────────────────
-embed_model = SentenceTransformer("all-MiniLM-L6-v2")
-index  = None
-chunks = []
+embed_model  = SentenceTransformer("all-MiniLM-L6-v2")
+index        = None
+chunks       = []
 chat_history = []
 
-# ── GROQ CLIENT ────────────────────────────────────────────────────────────────
 client = OpenAI(
     api_key=os.getenv("GROQ_API_KEY"),
     base_url="https://api.groq.com/openai/v1",
 )
 
-# ── HELPERS ────────────────────────────────────────────────────────────────────
-def convert_drive_link(link: str) -> str:
+def convert_drive_link(link):
     try:
-        file_id = link.split("/d/")[1].split("/")[0]
-        return f"https://drive.google.com/uc?id={file_id}"
+        return f"https://drive.google.com/uc?id={link.split('/d/')[1].split('/')[0]}"
     except Exception:
         return link
 
-
-def load_pdf_from_link(link: str) -> str:
+def load_pdf_from_link(link):
     global index, chunks
-    url      = convert_drive_link(link)
-    pdf_path = "temp.pdf"
-
-    resp = requests.get(url, timeout=30)
-    with open(pdf_path, "wb") as f:
+    resp = requests.get(convert_drive_link(link), timeout=30)
+    with open("temp.pdf", "wb") as f:
         f.write(resp.content)
-
-    reader = PdfReader(pdf_path)
+    reader = PdfReader("temp.pdf")
     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 = embed_model.encode(chunks)
-    dim        = embeddings.shape[1]
-    index      = faiss.IndexFlatL2(dim)
-    index.add(np.array(embeddings, dtype="float32"))
-
-    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, dtype="float32"), k)
-    return [chunks[i] for i in indices_[0]]
-
-
-def generate_answer(query: str, conversation_context: str = "") -> str:
+            chunks.append(" ".join(words[i:i+500]))
+    emb   = embed_model.encode(chunks)
+    index = faiss.IndexFlatL2(emb.shape[1])
+    index.add(np.array(emb, dtype="float32"))
+    return f"✅  {len(chunks)} chunks indexed · {len(texts)} pages parsed · ready"
+
+def retrieve(query, k=3):
+    if index is None: return []
+    q = embed_model.encode([query])
+    _, idx = index.search(np.array(q, dtype="float32"), k)
+    return [chunks[i] for i in idx[0]]
+
+def generate_answer(query, ctx=""):
     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}
+        return "⚠️  Please load a PDF first."
+    rag = "\n\n".join(retrieve(query))
+    prompt = f"""You are a senior financial analyst at Deutsche Telekom.
+You have memory of past conversation and access to official report data.
 
-PDF Context — use ONLY this for factual claims:
-{rag_text}
+Conversation history:
+{ctx}
 
-User question: {query}
+Report excerpts (cite ONLY from these for facts):
+{rag}
 
-Respond with precision and confidence. Reference prior conversation when relevant.
-Use clear structure (short paragraphs or bullet points where helpful)."""
+Question: {query}
 
-    response = client.chat.completions.create(
+Respond precisely, use numbers, and keep it concise."""
+    resp = client.chat.completions.create(
         model="llama-3.1-8b-instant",
         messages=[{"role": "user", "content": prompt}],
-        temperature=0.5,
-        max_tokens=700,
+        temperature=0.4, max_tokens=650,
     )
-    return response.choices[0].message.content
+    return resp.choices[0].message.content
 
-
-def chat(user_input: str, history: list) -> tuple:
+def chat(user_input, history):
     global chat_history
-
-    ctx = "\n".join(
-        f"User: {h['user']}\nAssistant: {h['bot']}"
-        for h in chat_history[-5:]
-    )
-
+    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 = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Deutsche_Telekom_logo_simple.svg/120px-Deutsche_Telekom_logo_simple.svg.png"
 
-# ── 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 class="app-header">
+      <div class="header-brand">
+        <div class="t-logo">T</div>
         <div>
-          <div class="header-title">Finance <span>RAG</span> Intelligence</div>
-          <div class="header-sub">Deutsche Telekom · AI-Powered Document Analysis · {{}}</div>
+          <div class="header-title">Finance <em>RAG</em> Intelligence</div>
+          <div class="header-sub">Deutsche Telekom · AI-Powered Document Analysis</div>
         </div>
       </div>
+      <div class="status-pill">
+        <div class="pulse-dot"></div>
+        <span class="status-label">System Live</span>
+      </div>
+    </div>
+    <div class="info-chips">
+      <div class="chip"><div class="chip-dot"></div>Groq · LLaMA 3 8B</div>
+      <div class="chip"><div class="chip-dot" style="background:#6600AA"></div>FAISS Vector Search</div>
+      <div class="chip"><div class="chip-dot" style="background:#00C896"></div>MiniLM-L6 Embeddings</div>
+      <div class="chip"><div class="chip-dot" style="background:#378ADD"></div>RAG · Top-K = 3</div>
+      <div class="chip"><div class="chip-dot" style="background:#FFB700"></div>Conversation Memory</div>
     </div>
     """)
 
-    # ── PDF Loader Row ─────────────────────────────────────────────────────────
+    gr.HTML('<div class="section-label">📎 Document Loader</div>')
+
     with gr.Row(equal_height=True):
-        with gr.Column(scale=5):
+        with gr.Column(scale=6):
             link_input = gr.Textbox(
-                label="📎  Google Drive PDF Link",
+                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")
+        with gr.Column(scale=1, min_width=150):
+            load_btn = gr.Button("📥  Load & Index", variant="primary")
 
-    status = gr.Textbox(
-        label="System Status",
-        interactive=False,
-        placeholder="Waiting for PDF…",
-    )
+    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>")
+    gr.HTML("<div style='height:5px;background:linear-gradient(90deg,#E20074,transparent);border-radius:3px;opacity:.4;margin:16px 0 20px'></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>")
+    gr.HTML('<div class="section-label">🤖 AI Financial Analyst</div>')
 
-    chatbot = gr.Chatbot(
-        height=480,
-        show_label=False,
-        avatar_images=(None, LOGO_URL),
-    )
+    chatbot = gr.Chatbot(height=460, show_label=False, avatar_images=(None, LOGO))
 
     with gr.Row(equal_height=True):
-        with gr.Column(scale=7):
+        with gr.Column(scale=8):
             msg = gr.Textbox(
                 show_label=False,
-                placeholder="Ask about revenue, EBITDA, KPIs, strategic outlook…",
+                placeholder="Ask about revenue, EBITDA, KPIs, capex, strategic outlook…",
                 container=False,
-                elem_classes=["message-input"],
             )
-        with gr.Column(scale=1, min_width=110):
+        with gr.Column(scale=1, min_width=120):
             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 class="app-footer">
+      <div class="f-text">Powered by <span>Groq</span> · <span>LLaMA 3</span> · <span>FAISS</span> · <span>MiniLM</span></div>
+      <div class="f-text">Deutsche Telekom AG · Internal AI Tool · 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()