Update app.py

app.py

@@ -4,710 +4,659 @@ import math
 import os
 from pypdf import PdfReader
 
-
 # ── CONFIG ───────────────────────────────────────────────────────────────────
-OPENAI_API_KEY = "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"
-#os.environ.get("OPENAI_API_KEY")
+OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
 client         = openai.OpenAI(api_key=OPENAI_API_KEY)
 
-
 EMBED_MODEL = "text-embedding-3-small"
 CHAT_MODEL  = "gpt-4o-mini"
 CHUNK_SIZE  = 100
 OVERLAP     = 40
 TOP_K       = 2
 
-
 # ── GLOBALS ──────────────────────────────────────────────────────────────────
 stored_chunks     = []
 stored_embeddings = []
 doc_name          = ""
 
-
 # ── CORE LOGIC ───────────────────────────────────────────────────────────────
 def split_chunks(text, size=CHUNK_SIZE, overlap=OVERLAP):
-   words, chunks, start = text.split(), [], 0
-   while start < len(words):
-       chunks.append(" ".join(words[start:start + size]))
-       start += size - overlap
-   return chunks
-
+    words, chunks, start = text.split(), [], 0
+    while start < len(words):
+        chunks.append(" ".join(words[start:start + size]))
+        start += size - overlap
+    return chunks
 
 def embed(text):
-   return client.embeddings.create(model=EMBED_MODEL, input=text).data[0].embedding
-
+    return client.embeddings.create(model=EMBED_MODEL, input=text).data[0].embedding
 
 def cosine_similarity(a, b):
-   dot   = sum(x * y for x, y in zip(a, b))
-   normA = math.sqrt(sum(x * x for x in a))
-   normB = math.sqrt(sum(x * x for x in b))
-   return dot / (normA * normB)
-
+    dot   = sum(x * y for x, y in zip(a, b))
+    normA = math.sqrt(sum(x * x for x in a))
+    normB = math.sqrt(sum(x * x for x in b))
+    return dot / (normA * normB)
 
 def get_top_chunks(question, k=TOP_K):
-   q_vec  = embed(question)
-   scores = [(cosine_similarity(q_vec, cv), c)
-             for cv, c in zip(stored_embeddings, stored_chunks)]
-   scores.sort(reverse=True)
-   return [c for _, c in scores[:k]]
-
+    q_vec  = embed(question)
+    scores = [(cosine_similarity(q_vec, cv), c)
+              for cv, c in zip(stored_embeddings, stored_chunks)]
+    scores.sort(reverse=True)
+    return [c for _, c in scores[:k]]
 
 def upload_pdf(file):
-   global stored_chunks, stored_embeddings, doc_name
-   if file is None:
-       return ("— No file selected.", gr.update(interactive=False))
-
-
-   reader    = PdfReader(file.name)
-   full_text = "".join(page.extract_text() or "" for page in reader.pages)
-   doc_name  = file.name.split("/")[-1]
+    global stored_chunks, stored_embeddings, doc_name
+    if file is None:
+        return ("— No file selected.", gr.update(interactive=False))
 
+    reader    = PdfReader(file.name)
+    full_text = "".join(page.extract_text() or "" for page in reader.pages)
+    doc_name  = file.name.split("/")[-1]
 
-   stored_chunks     = split_chunks(full_text)
-   stored_embeddings = [embed(c) for c in stored_chunks]
-
-
-   return (
-       f"✦  {doc_name}\n→  {len(stored_chunks)} chunks indexed and ready.",
-       gr.update(interactive=True)
-   )
+    stored_chunks     = split_chunks(full_text)
+    stored_embeddings = [embed(c) for c in stored_chunks]
 
+    return (
+        f"✦  {doc_name}\n→  {len(stored_chunks)} chunks indexed and ready.",
+        gr.update(interactive=True)
+    )
 
 def chat(question, history):
-   if not stored_chunks:
-       return history + [(question, "Please index a document in the Upload tab first.")]
-
-
-   context = "\n\n".join([f"[{i+1}] {c}" for i, c in enumerate(get_top_chunks(question))])
-   prompt  = (
-       "Answer strictly from the document text below.\n"
-       "If not found, reply: \"This information is not in the document.\"\n\n"
-       f"TEXT:\n{context}\n\nQUESTION: {question}\n\nANSWER:"
-   )
-   response = client.chat.completions.create(
-       model=CHAT_MODEL,
-       messages=[
-           {"role": "system", "content":
-               "Strict document assistant. Only use provided text. "
-               "If answer absent, say: This information is not in the document."},
-           {"role": "user", "content": prompt}
-       ]
-   )
-   return history + [(question, response.choices[0].message.content)]
-
-
+    if not stored_chunks:
+        return history + [(question, "Please index a document in the Upload tab first.")]
+
+    context = "\n\n".join([f"[{i+1}] {c}" for i, c in enumerate(get_top_chunks(question))])
+    prompt  = (
+        "Answer strictly from the document text below.\n"
+        "If not found, reply: \"This information is not in the document.\"\n\n"
+        f"TEXT:\n{context}\n\nQUESTION: {question}\n\nANSWER:"
+    )
+    response = client.chat.completions.create(
+        model=CHAT_MODEL,
+        messages=[
+            {"role": "system", "content":
+                "Strict document assistant. Only use provided text. "
+                "If answer absent, say: This information is not in the document."},
+            {"role": "user", "content": prompt}
+        ]
+    )
+    return history + [(question, response.choices[0].message.content)]
 
 
 # ── CSS ───────────────────────────────────────────────────────────────────────
 css = """
 @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');
 
-
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-
 :root {
-   --bg:          #f4f1ec;
-   --surface:     #faf8f5;
-   --surface-2:   #f0ede7;
-   --border:      rgba(60,50,30,0.09);
-   --border-2:    rgba(60,50,30,0.15);
-   --accent:      #7c6a50;
-   --accent-light:#a8916f;
-   --accent-glow: rgba(124,106,80,0.08);
-   --green:       #4a8c62;
-   --text-1:      #1e1a14;
-   --text-2:      #6b6153;
-   --text-3:      #a89e90;
-   --font-serif:  'DM Serif Display', Georgia, serif;
-   --font-sans:   'DM Sans', sans-serif;
-   --font-mono:   'DM Mono', monospace;
-   --r:           10px;
-   --r-lg:        18px;
-   --ease:        cubic-bezier(0.4,0,0.2,1);
-   --shadow:      0 1px 4px rgba(60,50,30,0.07), 0 4px 16px rgba(60,50,30,0.04);
+    --bg:          #f4f1ec;
+    --surface:     #faf8f5;
+    --surface-2:   #f0ede7;
+    --border:      rgba(60,50,30,0.09);
+    --border-2:    rgba(60,50,30,0.15);
+    --accent:      #7c6a50;
+    --accent-light:#a8916f;
+    --accent-glow: rgba(124,106,80,0.08);
+    --green:       #4a8c62;
+    --text-1:      #1e1a14;
+    --text-2:      #6b6153;
+    --text-3:      #a89e90;
+    --font-serif:  'DM Serif Display', Georgia, serif;
+    --font-sans:   'DM Sans', sans-serif;
+    --font-mono:   'DM Mono', monospace;
+    --r:           10px;
+    --r-lg:        18px;
+    --ease:        cubic-bezier(0.4,0,0.2,1);
+    --shadow:      0 1px 4px rgba(60,50,30,0.07), 0 4px 16px rgba(60,50,30,0.04);
 }
 
-
 html, body, .gradio-container, #root {
-   font-family: var(--font-sans) !important;
-   background:  var(--bg) !important;
-   color:       var(--text-1) !important;
+    font-family: var(--font-sans) !important;
+    background:  var(--bg) !important;
+    color:       var(--text-1) !important;
 }
 
-
 .gradio-container {
-   max-width: 1080px !important;
-   margin: 0 auto !important;
-   padding: 44px 28px 68px !important;
+    max-width: 1080px !important;
+    margin: 0 auto !important;
+    padding: 44px 28px 68px !important;
 }
 
-
 ::-webkit-scrollbar { width: 3px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
 
-
 /* ── MASTHEAD ── */
 .mast {
-   display: flex;
-   align-items: flex-start;
-   justify-content: space-between;
-   padding-bottom: 26px;
-   border-bottom: 1px solid var(--border-2);
-   margin-bottom: 32px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-bottom: 26px;
+    border-bottom: 1px solid var(--border-2);
+    margin-bottom: 32px;
 }
 .mast-title {
-   font-family: var(--font-serif) !important;
-   font-size: 2.6rem;
-   font-weight: 400;
-   color: var(--text-1);
-   letter-spacing: -0.025em;
-   line-height: 1.05;
+    font-family: var(--font-serif) !important;
+    font-size: 2.6rem;
+    font-weight: 400;
+    color: var(--text-1);
+    letter-spacing: -0.025em;
+    line-height: 1.05;
 }
 .mast-title em { font-style: italic; color: var(--accent); }
 .mast-sub {
-   font-family: var(--font-mono);
-   font-size: 0.6rem;
-   font-weight: 300;
-   color: var(--text-3);
-   letter-spacing: 0.14em;
-   text-transform: uppercase;
-   margin-top: 9px;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    font-weight: 300;
+    color: var(--text-3);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    margin-top: 9px;
 }
 
-
 /* ── PORTFOLIO BADGE ── */
 .portfolio-badge {
-   display: flex;
-   flex-direction: column;
-   align-items: flex-end;
-   gap: 7px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 7px;
 }
 .badge-inner {
-   display: flex;
-   align-items: center;
-   gap: 8px;
-   background: var(--surface);
-   border: 1px solid var(--border-2);
-   border-radius: 8px;
-   padding: 9px 14px 9px 11px;
-   box-shadow: var(--shadow);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--surface);
+    border: 1px solid var(--border-2);
+    border-radius: 8px;
+    padding: 9px 14px 9px 11px;
+    box-shadow: var(--shadow);
 }
 .badge-dot {
-   width: 7px;
-   height: 7px;
-   border-radius: 50%;
-   background: var(--green);
-   box-shadow: 0 0 0 2px rgba(74,140,98,0.15);
-   animation: pulse 2.4s ease-in-out infinite;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--green);
+    box-shadow: 0 0 0 2px rgba(74,140,98,0.15);
+    animation: pulse 2.4s ease-in-out infinite;
 }
 @keyframes pulse {
-   0%, 100% { opacity: 1;   box-shadow: 0 0 0 2px rgba(74,140,98,0.15); }
-   50%       { opacity: 0.5; box-shadow: 0 0 0 4px rgba(74,140,98,0.08); }
+    0%, 100% { opacity: 1;   box-shadow: 0 0 0 2px rgba(74,140,98,0.15); }
+    50%       { opacity: 0.5; box-shadow: 0 0 0 4px rgba(74,140,98,0.08); }
 }
 .badge-text {
-   font-family: var(--font-mono);
-   font-size: 0.65rem;
-   font-weight: 500;
-   color: var(--text-1);
-   letter-spacing: 0.04em;
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    font-weight: 500;
+    color: var(--text-1);
+    letter-spacing: 0.04em;
 }
 .badge-sub {
-   font-family: var(--font-mono);
-   font-size: 0.56rem;
-   color: var(--text-3);
-   letter-spacing: 0.1em;
-   text-transform: uppercase;
-   margin-top: 2px;
+    font-family: var(--font-mono);
+    font-size: 0.56rem;
+    color: var(--text-3);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-top: 2px;
 }
 .stack-chips { display: flex; gap: 5px; }
 .chip {
-   font-family: var(--font-mono);
-   font-size: 0.55rem;
-   color: var(--text-3);
-   background: var(--surface);
-   border: 1px solid var(--border-2);
-   border-radius: 4px;
-   padding: 3px 8px;
-   letter-spacing: 0.08em;
-   text-transform: uppercase;
+    font-family: var(--font-mono);
+    font-size: 0.55rem;
+    color: var(--text-3);
+    background: var(--surface);
+    border: 1px solid var(--border-2);
+    border-radius: 4px;
+    padding: 3px 8px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
 }
 
-
 /* ── TABS ── */
 .tabs > .tab-nav {
-   border-bottom: 1px solid var(--border-2) !important;
-   background: transparent !important;
-   margin-bottom: 28px !important;
-   gap: 0 !important;
+    border-bottom: 1px solid var(--border-2) !important;
+    background: transparent !important;
+    margin-bottom: 28px !important;
+    gap: 0 !important;
 }
 .tabs > .tab-nav button {
-   font-family: var(--font-mono) !important;
-   font-size: 0.63rem !important;
-   font-weight: 500 !important;
-   letter-spacing: 0.12em !important;
-   text-transform: uppercase !important;
-   color: var(--text-3) !important;
-   background: transparent !important;
-   border: none !important;
-   border-bottom: 2px solid transparent !important;
-   padding: 10px 22px !important;
-   border-radius: 0 !important;
-   transition: color 0.2s var(--ease), border-color 0.2s var(--ease) !important;
-   margin-bottom: -1px !important;
-}
-.tabs > .tab-nav button:hover   { color: var(--text-2) !important; }
+    font-family: var(--font-mono) !important;
+    font-size: 0.63rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
+    color: var(--text-3) !important;
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 2px solid transparent !important;
+    padding: 10px 22px !important;
+    border-radius: 0 !important;
+    transition: color 0.2s var(--ease), border-color 0.2s var(--ease) !important;
+    margin-bottom: -1px !important;
+}
+.tabs > .tab-nav button:hover    { color: var(--text-2) !important; }
 .tabs > .tab-nav button.selected {
-   color: var(--accent) !important;
-   border-bottom-color: var(--accent) !important;
-   background: transparent !important;
+    color: var(--accent) !important;
+    border-bottom-color: var(--accent) !important;
+    background: transparent !important;
 }
 
-
 /* ── PANEL ── */
 .panel {
-   background: var(--surface);
-   border: 1px solid var(--border-2);
-   border-radius: var(--r-lg);
-   padding: 28px 26px;
-   box-shadow: var(--shadow);
+    background: var(--surface);
+    border: 1px solid var(--border-2);
+    border-radius: var(--r-lg);
+    padding: 28px 26px;
+    box-shadow: var(--shadow);
 }
 
-
 /* ── EYEBROW ── */
 .eyebrow {
-   font-family: var(--font-mono);
-   font-size: 0.56rem;
-   font-weight: 500;
-   letter-spacing: 0.18em;
-   text-transform: uppercase;
-   color: var(--text-3);
-   margin-bottom: 16px;
-   display: flex;
-   align-items: center;
-   gap: 10px;
+    font-family: var(--font-mono);
+    font-size: 0.56rem;
+    font-weight: 500;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--text-3);
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 .eyebrow::after {
-   content: '';
-   flex: 1;
-   height: 1px;
-   background: var(--border-2);
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border-2);
 }
 
-
 /* ── UPLOAD GRID ── */
 .upload-grid {
-   display: grid;
-   grid-template-columns: 1fr 1fr;
-   gap: 22px;
-   align-items: start;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    align-items: start;
 }
 .upload-right { display: flex; flex-direction: column; gap: 16px; }
 
-
 /* ── SPEC GRID ── */
 .specs {
-   display: grid;
-   grid-template-columns: 1fr 1fr;
-   gap: 7px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 7px;
 }
 .spec {
-   background: var(--bg);
-   border: 1px solid var(--border);
-   border-radius: 8px;
-   padding: 11px 13px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 11px 13px;
 }
 .spec-k {
-   font-family: var(--font-mono);
-   font-size: 0.52rem;
-   letter-spacing: 0.12em;
-   text-transform: uppercase;
-   color: var(--text-3);
-   margin-bottom: 5px;
+    font-family: var(--font-mono);
+    font-size: 0.52rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-3);
+    margin-bottom: 5px;
 }
 .spec-v {
-   font-family: var(--font-mono);
-   font-size: 0.76rem;
-   color: var(--accent);
-   font-weight: 400;
+    font-family: var(--font-mono);
+    font-size: 0.76rem;
+    color: var(--accent);
+    font-weight: 400;
 }
 .spec.wide { grid-column: span 2; }
 
-
 /* ── ARCH BOX ── */
 .arch-box {
-   background: var(--bg);
-   border: 1px solid var(--border);
-   border-radius: 10px;
-   padding: 16px 18px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 16px 18px;
 }
 .arch-title {
-   font-family: var(--font-mono);
-   font-size: 0.54rem;
-   letter-spacing: 0.16em;
-   text-transform: uppercase;
-   color: var(--text-3);
-   margin-bottom: 14px;
+    font-family: var(--font-mono);
+    font-size: 0.54rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--text-3);
+    margin-bottom: 14px;
 }
 .arch-step {
-   display: flex;
-   align-items: flex-start;
-   gap: 12px;
-   margin-bottom: 11px;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 11px;
 }
 .arch-step:last-child { margin-bottom: 0; }
 .arch-num {
-   font-family: var(--font-mono);
-   font-size: 0.6rem;
-   color: var(--accent-light);
-   min-width: 16px;
-   margin-top: 1px;
-   font-weight: 500;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--accent-light);
+    min-width: 16px;
+    margin-top: 1px;
+    font-weight: 500;
 }
 .arch-desc {
-   font-family: var(--font-sans);
-   font-size: 0.79rem;
-   font-weight: 300;
-   color: var(--text-2);
-   line-height: 1.55;
+    font-family: var(--font-sans);
+    font-size: 0.79rem;
+    font-weight: 300;
+    color: var(--text-2);
+    line-height: 1.55;
 }
 
-
 /* ── FILE INPUT ── */
 .gr-file {
-   border: 1px dashed var(--border-2) !important;
-   border-radius: var(--r) !important;
-   background: var(--surface-2) !important;
-   transition: border-color 0.2s var(--ease), background 0.2s var(--ease) !important;
+    border: 1px dashed var(--border-2) !important;
+    border-radius: var(--r) !important;
+    background: var(--surface-2) !important;
+    transition: border-color 0.2s var(--ease), background 0.2s var(--ease) !important;
 }
 .gr-file:hover {
-   border-color: var(--accent-light) !important;
-   background: var(--accent-glow) !important;
+    border-color: var(--accent-light) !important;
+    background: var(--accent-glow) !important;
 }
 
-
 /* ── INPUTS ── */
 textarea, input[type="text"] {
-   font-family: var(--font-sans) !important;
-   font-size: 0.88rem !important;
-   font-weight: 300 !important;
-   color: var(--text-1) !important;
-   background: var(--surface-2) !important;
-   border: 1px solid var(--border-2) !important;
-   border-radius: var(--r) !important;
-   padding: 11px 15px !important;
-   line-height: 1.65 !important;
-   transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
-   caret-color: var(--accent) !important;
+    font-family: var(--font-sans) !important;
+    font-size: 0.88rem !important;
+    font-weight: 300 !important;
+    color: var(--text-1) !important;
+    background: var(--surface-2) !important;
+    border: 1px solid var(--border-2) !important;
+    border-radius: var(--r) !important;
+    padding: 11px 15px !important;
+    line-height: 1.65 !important;
+    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
+    caret-color: var(--accent) !important;
 }
 textarea:focus, input[type="text"]:focus {
-   border-color: var(--accent-light) !important;
-   box-shadow: 0 0 0 3px var(--accent-glow) !important;
-   outline: none !important;
-   background: var(--surface) !important;
+    border-color: var(--accent-light) !important;
+    box-shadow: 0 0 0 3px var(--accent-glow) !important;
+    outline: none !important;
+    background: var(--surface) !important;
 }
 textarea::placeholder, input::placeholder {
-   color: var(--text-3) !important;
-   font-weight: 300 !important;
+    color: var(--text-3) !important;
+    font-weight: 300 !important;
 }
 
-
 .status-box textarea {
-   font-family: var(--font-mono) !important;
-   font-size: 0.73rem !important;
-   color: var(--text-2) !important;
-   background: var(--bg) !important;
-   border: 1px solid var(--border) !important;
-   line-height: 1.9 !important;
+    font-family: var(--font-mono) !important;
+    font-size: 0.73rem !important;
+    color: var(--text-2) !important;
+    background: var(--bg) !important;
+    border: 1px solid var(--border) !important;
+    line-height: 1.9 !important;
 }
 
-
 /* ── BUTTONS ── */
 button { font-family: var(--font-sans) !important; cursor: pointer !important; }
 
-
 button.primary {
-   background: var(--accent) !important;
-   color: #faf8f5 !important;
-   border: none !important;
-   border-radius: 7px !important;
-   padding: 10px 22px !important;
-   font-size: 0.8rem !important;
-   font-weight: 500 !important;
-   letter-spacing: 0.02em !important;
-   transition: all 0.18s var(--ease) !important;
-   box-shadow: 0 1px 3px rgba(124,106,80,0.25) !important;
+    background: var(--accent) !important;
+    color: #faf8f5 !important;
+    border: none !important;
+    border-radius: 7px !important;
+    padding: 10px 22px !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.02em !important;
+    transition: all 0.18s var(--ease) !important;
+    box-shadow: 0 1px 3px rgba(124,106,80,0.25) !important;
 }
 button.primary:hover {
-   background: var(--accent-light) !important;
-   transform: translateY(-1px) !important;
-   box-shadow: 0 4px 14px rgba(124,106,80,0.22) !important;
+    background: var(--accent-light) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 14px rgba(124,106,80,0.22) !important;
 }
 button.primary:active  { transform: translateY(0) !important; box-shadow: none !important; }
 button.primary:disabled {
-   background: var(--surface-2) !important;
-   color: var(--text-3) !important;
-   box-shadow: none !important;
-   cursor: not-allowed !important;
-   transform: none !important;
+    background: var(--surface-2) !important;
+    color: var(--text-3) !important;
+    box-shadow: none !important;
+    cursor: not-allowed !important;
+    transform: none !important;
 }
 
-
 button.secondary {
-   background: transparent !important;
-   color: var(--text-2) !important;
-   border: 1px solid var(--border-2) !important;
-   border-radius: 7px !important;
-   padding: 10px 18px !important;
-   font-size: 0.8rem !important;
-   font-weight: 400 !important;
-   transition: all 0.18s var(--ease) !important;
+    background: transparent !important;
+    color: var(--text-2) !important;
+    border: 1px solid var(--border-2) !important;
+    border-radius: 7px !important;
+    padding: 10px 18px !important;
+    font-size: 0.8rem !important;
+    font-weight: 400 !important;
+    transition: all 0.18s var(--ease) !important;
 }
 button.secondary:hover {
-   color: var(--text-1) !important;
-   border-color: var(--text-3) !important;
-   background: var(--surface-2) !important;
+    color: var(--text-1) !important;
+    border-color: var(--text-3) !important;
+    background: var(--surface-2) !important;
 }
 
-
 /* ── CHATBOT ── */
 .chatbot-wrap > div {
-   background: var(--bg) !important;
-   border: 1px solid var(--border-2) !important;
-   border-radius: var(--r) !important;
-   padding: 10px !important;
-}
-.message-wrap .user-row .message {
-   background: var(--accent) !important;
-   color: #faf8f5 !important;
-   border: none !important;
-   border-radius: 14px 14px 3px 14px !important;
-   font-size: 0.85rem !important;
-   font-weight: 300 !important;
-   line-height: 1.7 !important;
-   padding: 11px 15px !important;
-   max-width: 76% !important;
-   margin-left: auto !important;
-   box-shadow: 0 2px 8px rgba(124,106,80,0.15) !important;
-}
-.message-wrap .bot-row .message {
-   background: var(--surface) !important;
-   color: var(--text-1) !important;
-   border: 1px solid var(--border-2) !important;
-   border-radius: 14px 14px 14px 3px !important;
-   font-size: 0.85rem !important;
-   font-weight: 300 !important;
-   line-height: 1.7 !important;
-   padding: 11px 15px !important;
-   max-width: 76% !important;
+    background: var(--bg) !important;
+    border: 1px solid var(--border-2) !important;
+    border-radius: var(--r) !important;
+    padding: 10px !important;
+}
+.message-wrap .user-row .message,
+.message.user {
+    background: var(--accent) !important;
+    color: #faf8f5 !important;
+    border: none !important;
+    border-radius: 14px 14px 3px 14px !important;
+    font-size: 0.85rem !important;
+    font-weight: 300 !important;
+    line-height: 1.7 !important;
+    padding: 11px 15px !important;
+    max-width: 76% !important;
+    margin-left: auto !important;
+    box-shadow: 0 2px 8px rgba(124,106,80,0.15) !important;
+}
+.message-wrap .bot-row .message,
+.message.bot {
+    background: var(--surface) !important;
+    color: var(--text-1) !important;
+    border: 1px solid var(--border-2) !important;
+    border-radius: 14px 14px 14px 3px !important;
+    font-size: 0.85rem !important;
+    font-weight: 300 !important;
+    line-height: 1.7 !important;
+    padding: 11px 15px !important;
+    max-width: 76% !important;
 }
 
-
 /* ── LABELS ── */
 label > span, .gr-form label span {
-   font-family: var(--font-mono) !important;
-   font-size: 0.56rem !important;
-   font-weight: 500 !important;
-   letter-spacing: 0.12em !important;
-   text-transform: uppercase !important;
-   color: var(--text-3) !important;
+    font-family: var(--font-mono) !important;
+    font-size: 0.56rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
+    color: var(--text-3) !important;
 }
 
-
 /* ── FOOTER ── */
 .footer {
-   text-align: center;
-   margin-top: 44px;
-   padding-top: 20px;
-   border-top: 1px solid var(--border-2);
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   gap: 14px;
+    text-align: center;
+    margin-top: 44px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
 }
 .footer p {
-   font-family: var(--font-mono);
-   font-size: 0.56rem;
-   color: var(--text-3);
-   letter-spacing: 0.1em;
-   text-transform: uppercase;
+    font-family: var(--font-mono);
+    font-size: 0.56rem;
+    color: var(--text-3);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
 }
 .footer-sep { color: var(--text-3); font-size: 0.45rem; }
 """
 
-
 # ── UI ────────────────────────────────────────────────────────────────────────
-with gr.Blocks(css=css, title="Document Intelligence — Jason Kishore") as demo:
-
-
-   gr.HTML("""
-   <div class="mast">
-       <div>
-           <div class="mast-title">Document <em>Intelligence</em></div>
-           <div class="mast-sub">Retrieval-Augmented Generation · Semantic Search · GPT-4o Mini</div>
-       </div>
-       <div class="portfolio-badge">
-           <div class="badge-inner">
-               <div class="badge-dot"></div>
-               <div>
-                   <div class="badge-text">Jason Kishore</div>
-                   <div class="badge-sub">Portfolio Project</div>
-               </div>
-           </div>
-           <div class="stack-chips">
-               <span class="chip">Python</span>
-               <span class="chip">OpenAI</span>
-               <span class="chip">Gradio</span>
-               <span class="chip">RAG</span>
-           </div>
-       </div>
-   </div>
-   """)
-
-
-   with gr.Tabs(elem_classes=["tabs"]):
-
-
-       # ── Tab 1 · Upload ───────────────────────────────────────────────────
-       with gr.TabItem("01 · Upload & Index"):
-           with gr.Column(elem_classes=["panel"]):
-               gr.HTML('<div class="eyebrow">Document Ingestion</div>')
-               gr.HTML('<div class="upload-grid">')
-
-
-               with gr.Column():
-                   pdf_input     = gr.File(label="Upload PDF", file_types=[".pdf"])
-                   upload_btn    = gr.Button("Index Document", variant="primary")
-                   upload_status = gr.Textbox(
-                       label="Status",
-                       lines=2,
-                       interactive=False,
-                       value="— Awaiting document",
-                       elem_classes=["status-box"]
-                   )
-
-
-               with gr.Column():
-                   gr.HTML("""
-                   <div class="upload-right">
-                       <div>
-                           <div class="eyebrow">Configuration</div>
-                           <div class="specs">
-                               <div class="spec">
-                                   <div class="spec-k">Embed Model</div>
-                                   <div class="spec-v">3-small</div>
-                               </div>
-                               <div class="spec">
-                                   <div class="spec-k">Chat Model</div>
-                                   <div class="spec-v">4o-mini</div>
-                               </div>
-                               <div class="spec">
-                                   <div class="spec-k">Chunk Size</div>
-                                   <div class="spec-v">100 words</div>
-                               </div>
-                               <div class="spec">
-                                   <div class="spec-k">Overlap</div>
-                                   <div class="spec-v">40 words</div>
-                               </div>
-                               <div class="spec wide">
-                                   <div class="spec-k">Top-K Retrieval</div>
-                                   <div class="spec-v">2 chunks / query</div>
-                               </div>
-                           </div>
-                       </div>
-                       <div class="arch-box">
-                           <div class="arch-title">Pipeline</div>
-                           <div class="arch-step">
-                               <div class="arch-num">01</div>
-                               <div class="arch-desc">PDF text extracted page-by-page via pypdf</div>
-                           </div>
-                           <div class="arch-step">
-                               <div class="arch-num">02</div>
-                               <div class="arch-desc">Text split into overlapping 100-word chunks</div>
-                           </div>
-                           <div class="arch-step">
-                               <div class="arch-num">03</div>
-                               <div class="arch-desc">Each chunk embedded with text-embedding-3-small</div>
-                           </div>
-                           <div class="arch-step">
-                               <div class="arch-num">04</div>
-                               <div class="arch-desc">Query embedded → top-2 chunks by cosine similarity</div>
-                           </div>
-                           <div class="arch-step">
-                               <div class="arch-num">05</div>
-                               <div class="arch-desc">GPT-4o Mini answers strictly from retrieved context</div>
-                           </div>
-                       </div>
-                   </div>
-                   """)
-
-
-               gr.HTML('</div>')
-
-
-       # ── Tab 2 · Chat ─────────────────────────────────────────────────────
-       with gr.TabItem("02 · Chat"):
-           with gr.Column(elem_classes=["panel"]):
-               gr.HTML('<div class="eyebrow">Conversation</div>')
-
-
-               chatbot = gr.Chatbot(
-                   height=440,
-                   show_label=False,
-                   bubble_full_width=False,
-                   elem_classes=["chatbot-wrap"],
-                   placeholder=(
-                       "<div style='font-family:DM Mono,monospace;font-size:0.62rem;"
-                       "color:#a89e90;text-align:center;padding:80px 0;"
-                       "letter-spacing:0.14em;text-transform:uppercase;line-height:2.2'>"
-                       "Index a document in the Upload tab<br>to begin your session</div>"
-                   )
-               )
-
-
-               msg_box = gr.Textbox(
-                   placeholder="Ask a question about your document…",
-                   label="Query",
-                   lines=1,
-                   max_lines=5,
-               )
-
-
-               with gr.Row():
-                   send_btn  = gr.Button("Send Query", variant="primary",   size="sm")
-                   clear_btn = gr.Button("Clear",      variant="secondary", size="sm")
-
-
-   gr.HTML("""
-   <div class="footer">
-       <p>Jason Kishore · Portfolio Project</p>
-       <span class="footer-sep">◆</span>
-       <p>Gradio · OpenAI · pypdf</p>
-       <span class="footer-sep">◆</span>
-       <p>Answers grounded strictly in uploaded document</p>
-   </div>
-   """)
-
-
-   # ── Events ───────────────────────────────────────────────────────────────
-   upload_btn.click(
-       fn=upload_pdf,
-       inputs=pdf_input,
-       outputs=[upload_status, send_btn]
-   )
-   send_btn.click(
-       fn=chat, inputs=[msg_box, chatbot], outputs=chatbot
-   ).then(lambda: "", outputs=msg_box)
-
-
-   msg_box.submit(
-       fn=chat, inputs=[msg_box, chatbot], outputs=chatbot
-   ).then(lambda: "", outputs=msg_box)
-
-
-   clear_btn.click(lambda: [], outputs=chatbot)
-
-
-demo.launch()
-
+# ✦ Gradio 6.0: css moves to launch(), title stays in Blocks
+with gr.Blocks(title="Document Intelligence — Jason Kishore") as demo:
+
+    gr.HTML("""
+    <div class="mast">
+        <div>
+            <div class="mast-title">Document <em>Intelligence</em></div>
+            <div class="mast-sub">Retrieval-Augmented Generation · Semantic Search · GPT-4o Mini</div>
+        </div>
+        <div class="portfolio-badge">
+            <div class="badge-inner">
+                <div class="badge-dot"></div>
+                <div>
+                    <div class="badge-text">Jason Kishore</div>
+                    <div class="badge-sub">Portfolio Project</div>
+                </div>
+            </div>
+            <div class="stack-chips">
+                <span class="chip">Python</span>
+                <span class="chip">OpenAI</span>
+                <span class="chip">Gradio</span>
+                <span class="chip">RAG</span>
+            </div>
+        </div>
+    </div>
+    """)
+
+    with gr.Tabs(elem_classes=["tabs"]):
+
+        # ── Tab 1 · Upload ──────────────��────────────────────────────────────
+        with gr.TabItem("01 · Upload & Index"):
+            with gr.Column(elem_classes=["panel"]):
+                gr.HTML('<div class="eyebrow">Document Ingestion</div>')
+                gr.HTML('<div class="upload-grid">')
+
+                with gr.Column():
+                    pdf_input     = gr.File(label="Upload PDF", file_types=[".pdf"])
+                    upload_btn    = gr.Button("Index Document", variant="primary")
+                    upload_status = gr.Textbox(
+                        label="Status",
+                        lines=2,
+                        interactive=False,
+                        value="— Awaiting document",
+                        elem_classes=["status-box"]
+                    )
+
+                with gr.Column():
+                    gr.HTML("""
+                    <div class="upload-right">
+                        <div>
+                            <div class="eyebrow">Configuration</div>
+                            <div class="specs">
+                                <div class="spec">
+                                    <div class="spec-k">Embed Model</div>
+                                    <div class="spec-v">3-small</div>
+                                </div>
+                                <div class="spec">
+                                    <div class="spec-k">Chat Model</div>
+                                    <div class="spec-v">4o-mini</div>
+                                </div>
+                                <div class="spec">
+                                    <div class="spec-k">Chunk Size</div>
+                                    <div class="spec-v">100 words</div>
+                                </div>
+                                <div class="spec">
+                                    <div class="spec-k">Overlap</div>
+                                    <div class="spec-v">40 words</div>
+                                </div>
+                                <div class="spec wide">
+                                    <div class="spec-k">Top-K Retrieval</div>
+                                    <div class="spec-v">2 chunks / query</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="arch-box">
+                            <div class="arch-title">Pipeline</div>
+                            <div class="arch-step">
+                                <div class="arch-num">01</div>
+                                <div class="arch-desc">PDF text extracted page-by-page via pypdf</div>
+                            </div>
+                            <div class="arch-step">
+                                <div class="arch-num">02</div>
+                                <div class="arch-desc">Text split into overlapping 100-word chunks</div>
+                            </div>
+                            <div class="arch-step">
+                                <div class="arch-num">03</div>
+                                <div class="arch-desc">Each chunk embedded with text-embedding-3-small</div>
+                            </div>
+                            <div class="arch-step">
+                                <div class="arch-num">04</div>
+                                <div class="arch-desc">Query embedded → top-2 chunks by cosine similarity</div>
+                            </div>
+                            <div class="arch-step">
+                                <div class="arch-num">05</div>
+                                <div class="arch-desc">GPT-4o Mini answers strictly from retrieved context</div>
+                            </div>
+                        </div>
+                    </div>
+                    """)
+
+                gr.HTML('</div>')
+
+        # ── Tab 2 · Chat ─────────────────────────────────────────────────────
+        with gr.TabItem("02 · Chat"):
+            with gr.Column(elem_classes=["panel"]):
+                gr.HTML('<div class="eyebrow">Conversation</div>')
+
+                # ✦ Gradio 6.0: bubble_full_width removed
+                chatbot = gr.Chatbot(
+                    height=440,
+                    show_label=False,
+                    elem_classes=["chatbot-wrap"],
+                    placeholder=(
+                        "<div style='font-family:DM Mono,monospace;font-size:0.62rem;"
+                        "color:#a89e90;text-align:center;padding:80px 0;"
+                        "letter-spacing:0.14em;text-transform:uppercase;line-height:2.2'>"
+                        "Index a document in the Upload tab<br>to begin your session</div>"
+                    )
+                )
+
+                msg_box = gr.Textbox(
+                    placeholder="Ask a question about your document…",
+                    label="Query",
+                    lines=1,
+                    max_lines=5,
+                )
+
+                with gr.Row():
+                    send_btn  = gr.Button("Send Query", variant="primary",   size="sm")
+                    clear_btn = gr.Button("Clear",      variant="secondary", size="sm")
+
+    gr.HTML("""
+    <div class="footer">
+        <p>Jason Kishore · Portfolio Project</p>
+        <span class="footer-sep">◆</span>
+        <p>Gradio · OpenAI · pypdf</p>
+        <span class="footer-sep">◆</span>
+        <p>Answers grounded strictly in uploaded document</p>
+    </div>
+    """)
+
+    # ── Events ───────────────────────────────────────────────────────────────
+    upload_btn.click(
+        fn=upload_pdf,
+        inputs=pdf_input,
+        outputs=[upload_status, send_btn]
+    )
+    send_btn.click(
+        fn=chat, inputs=[msg_box, chatbot], outputs=chatbot
+    ).then(lambda: "", outputs=msg_box)
+
+    msg_box.submit(
+        fn=chat, inputs=[msg_box, chatbot], outputs=chatbot
+    ).then(lambda: "", outputs=msg_box)
+
+    clear_btn.click(lambda: [], outputs=chatbot)
+
+# ✦ Gradio 6.0: css passed here instead of gr.Blocks()
+demo.launch(css=css)