Update templates/index.html

templates/index.html

@@ -5,238 +5,165 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>ORBIT – Educational Research Assistant</title>
   <link rel="icon" type="image/png" href="/static/icon.png" />
+  <meta name="description" content="ORBIT AI-powered educational research assistant." />
+  
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  
   <link rel="manifest" href="/manifest.json">
-  <meta name="theme-color" content="#ffffff">
+  <meta name="theme-color" content="#2563eb">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="ORBIT">
   
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  
   <script>
     tailwind.config = {
-      theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] }, colors: { accent: { DEFAULT: '#1a73e8', hover: '#1557b0', light: '#e8f0fe' } } } },
+      theme: {
+        extend: { fontFamily: { sans: ['Inter', 'sans-serif'] }, colors: { accent: { DEFAULT: '#1a73e8', hover: '#1557b0', light: '#e8f0fe' } } },
+      },
     };
   </script>
   <style>
     * { box-sizing: border-box; }
     body { font-family: 'Inter', sans-serif; }
-    ::-webkit-scrollbar { width: 5px; height: 5px; }
+    ::-webkit-scrollbar { width: 5px; }
     ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
-    #chat-textarea { resize: none; min-height: 24px; max-height: 150px; overflow-y: auto; }
-    .pill-shadow { box-shadow: 0 4px 28px rgba(26, 115, 232, 0.08), 0 1px 6px rgba(0, 0, 0, 0.05); }
-    #sidebar { transition: transform 0.3s ease-in-out; }
-    .modal-back { animation: fadeIn .2s ease; }
-    .modal-box { animation: scaleIn .2s cubic-bezier(.34, 1.56, .64, 1); }
+    ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
+    #chat-textarea { resize: none; min-height: 24px; max-height: 160px; overflow-y: auto; line-height: 1.5; }
+    .bubble-ai { animation: fadeUp .25s ease both; }
+    .bubble-user { animation: fadeUp .20s ease both; }
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+    .typing-dot { animation: blink 1.2s infinite; }
+    .typing-dot:nth-child(2) { animation-delay: .2s; }
+    .typing-dot:nth-child(3) { animation-delay: .4s; }
+    @keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
+    .modal-back { animation: fadeIn .18s ease; }
+    .modal-box { animation: scaleIn .22s cubic-bezier(.34, 1.56, .64, 1); }
     @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
     @keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
-    
-    .prose-orbit { color: #334155; font-size: 0.95rem; line-height: 1.6; }
-    .prose-orbit h1, .prose-orbit h2, .prose-orbit h3 { color: #0f172a; font-weight: 700; margin-top: 1.2em; margin-bottom: 0.5em; }
-    .prose-orbit h1 { font-size: 1.5rem; }
-    .prose-orbit h2 { font-size: 1.25rem; }
-    .prose-orbit h3 { font-size: 1.1rem; }
-    .prose-orbit p { margin-bottom: 1em; }
-    .prose-orbit p:last-child { margin-bottom: 0; }
-    .prose-orbit ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1em; }
-    .prose-orbit ol { list-style-type: decimal; padding-left: 1.5em; margin-bottom: 1em; }
-    .prose-orbit li { margin-bottom: 0.25em; }
-    .prose-orbit strong { color: #0f172a; font-weight: 600; }
-    .prose-orbit a { color: #2563eb; text-decoration: underline; }
-    .prose-orbit blockquote { border-left: 4px solid #cbd5e1; padding-left: 1em; color: #64748b; font-style: italic; margin: 1em 0; }
-    .prose-orbit code { background-color: #f1f5f9; color: #db2777; padding: 0.2em 0.4em; border-radius: 0.25em; font-family: monospace; font-size: 0.85em; }
-    .prose-orbit pre { background-color: #1e293b; padding: 1em; border-radius: 0.5em; overflow-x: auto; margin: 1em 0; }
-    .prose-orbit pre code { background-color: transparent; color: #f8fafc; padding: 0; font-size: 0.85em; }
-    .prose-orbit table { width: 100%; border-collapse: collapse; margin: 1em 0; }
-    .prose-orbit th, .prose-orbit td { border: 1px solid #e2e8f0; padding: 0.5em; text-align: left; }
-    .prose-orbit th { background-color: #f8fafc; font-weight: 600; }
+    .prose-orbit h1, .prose-orbit h2, .prose-orbit h3 { font-weight: 600; margin: .6em 0 .3em; color:#1e293b;}
+    .prose-orbit p { margin: .25em 0; line-height: 1.7; }
+    .prose-orbit ul { list-style: disc; padding-left: 1.4em; margin: .3em 0; }
+    .prose-orbit ol { list-style: decimal; padding-left: 1.4em; margin: .3em 0; }
+    .prose-orbit li { margin: .2em 0; }
+    .prose-orbit code { background: #f0f4f9; padding: .1em .35em; border-radius: 4px; font-size: .87em; font-family: monospace; color:#db2777;}
+    .prose-orbit pre { background: #1e293b; color:white; border-radius: 8px; padding: 1em; overflow-x: auto; margin: .5em 0; }
+    .prose-orbit pre code { background: none; padding: 0; color:inherit;}
+    .prose-orbit strong { font-weight: 600; }
+    .prose-orbit a { color: #1a73e8; text-decoration: underline; }
+    .pill-shadow { box-shadow: 0 4px 28px rgba(26, 115, 232, 0.10), 0 1px 6px rgba(0, 0, 0, 0.07); }
+    #sidebar { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
   </style>
 </head>
-<body class="flex h-screen w-full overflow-hidden bg-white text-gray-800 antialiased">
-
-  <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black/50 z-40 md:hidden transition-opacity"></div>
 
-  <aside id="sidebar" class="fixed md:relative flex flex-col w-64 md:w-64 bg-[#F8F9FA] border-r border-gray-100 h-full z-50 shrink-0 -translate-x-full md:translate-x-0">
-    <div class="flex items-center justify-between px-5 py-5 border-b border-gray-100 shrink-0">
-      <div class="flex items-center gap-3">
-        <img src="/static/icon.png" alt="Logo" class="w-8 h-8 rounded-md shadow-sm" onerror="this.style.display='none'">
-        <span class="font-bold text-[18px] text-accent tracking-tight">ORBIT AI</span>
-      </div>
-      <button id="btn-close-sidebar" class="md:hidden text-gray-400 hover:text-gray-600">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
-      </button>
-    </div>
-    
-    <div class="px-4 py-4 shrink-0 border-b border-gray-100">
-      <button id="btn-new-chat" class="w-full flex items-center justify-center gap-2 bg-accent hover:bg-accent-hover text-white font-semibold text-sm rounded-xl py-2.5 shadow-sm transition-colors">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
-        New Chat
-      </button>
-    </div>
+<body class="flex flex-col md:flex-row h-screen overflow-hidden bg-white text-gray-800 antialiased">
+  <nav class="md:hidden flex items-center px-4 h-14 bg-white border-b border-gray-100 shrink-0 z-40 relative">
+    <button id="btn-hamburger" class="p-2 rounded-lg hover:bg-gray-100 transition-colors mr-3"><svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg></button>
+    <div class="flex items-center gap-2"><img src="/static/icon.png" alt="Logo" class="w-7 h-7 rounded-full bg-white"/><span class="font-bold text-base text-accent tracking-tight">ORBIT</span></div>
+    <button id="btn-clear-chat-mobile" class="ml-auto p-2 text-gray-400 hover:text-red-400 transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button>
+  </nav>
 
-    <div class="flex-1 overflow-y-auto px-3 py-3">
-      <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-widest mb-2 px-1">Recent Chats</p>
-      <div id="history-list" class="space-y-1 mb-6"></div>
+  <div id="sidebar-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"></div>
 
-      <p class="text-[11px] font-semibold text-gray-400 uppercase tracking-widest mb-2 px-1 mt-6">Tools & Settings</p>
-      <div class="space-y-1">
-        <button id="btn-open-doi" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm transition-all">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
-          Validate DOI
-        </button>
-        <a id="btn-howto" href="/static/docs/dokumen.pdf" target="_blank" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm transition-all">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          How To
-        </a>
-        <button id="btn-open-settings" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm transition-all">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
-          Settings
-        </button>
-      </div>
+  <aside id="sidebar" class="fixed md:relative flex flex-col w-64 min-w-[256px] bg-[#F8F9FA] border-r border-gray-100 h-full md:h-screen z-50 shrink-0 -translate-x-full md:translate-x-0">
+    <div class="flex items-center gap-2.5 px-5 pt-6 pb-4"><img src="/static/icon.png" alt="Logo" class="w-8 h-8 rounded-full bg-white"/><span class="font-bold text-[17px] text-accent tracking-tight">ORBIT</span></div>
+    <div class="px-3 pb-3"><button id="btn-new-chat" class="w-full flex items-center justify-center gap-2 bg-accent hover:bg-accent-hover text-white font-semibold text-sm rounded-xl h-9 shadow-sm transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>New Chat</button></div>
+    <div class="px-4 pb-1"><p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">Recent</p></div>
+    <div id="history-list" class="flex-1 overflow-y-auto px-3 space-y-0.5 pb-2"></div>
+    <div class="border-t border-gray-200 pt-2 px-3 space-y-0.5 pb-1">
+      <button id="btn-doi" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm"><svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>Validate DOI</button>
+      <a id="btn-howto" href="/static/docs/dokumen.pdf" target="_blank" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm"><svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-linecap="round" stroke-linejoin="round"/></svg>How To</a>
+      <button id="btn-settings" class="sidebar-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm"><svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>Settings</button>
     </div>
-
-    <div class="border-t border-gray-100 p-4 shrink-0 flex items-center justify-between bg-[#F8F9FA]">
-      <div class="flex items-center gap-3 overflow-hidden">
-        <img id="user-avatar" src="" alt="Profile" class="w-9 h-9 rounded-full bg-slate-200 border border-slate-300 shrink-0 object-cover">
-        <div class="flex flex-col truncate">
-            <span id="user-name" class="text-sm font-semibold text-slate-700 truncate">Loading...</span>
-        </div>
-      </div>
-      <a href="/auth/logout" class="text-slate-400 hover:text-red-500 transition-colors p-2 shrink-0" title="Sign out">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
-      </a>
+    <div class="border-t border-gray-100 px-4 py-3 flex items-center gap-3">
+      <img id="user-avatar" src="" alt="Profile" class="w-8 h-8 rounded-full object-cover bg-accent-light ring-1 ring-gray-200 shrink-0" />
+      <div class="flex-1 min-w-0"><p id="user-name" class="text-xs font-semibold text-gray-700 truncate">Loading…</p><a href="/auth/logout" class="text-[10px] text-gray-400 hover:text-red-400 transition-colors">Sign out</a></div>
     </div>
   </aside>
 
-  <main class="flex-1 flex flex-col h-full w-full bg-white relative min-w-0">
-    
-    <header class="flex items-center justify-between px-4 md:px-6 py-3 border-b border-gray-100 shrink-0 bg-white z-20">
-      <div class="flex items-center gap-3">
-        <button id="btn-hamburger" class="md:hidden p-2 -ml-2 text-gray-500 hover:bg-gray-100 rounded-lg">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
-        </button>
-        <span class="text-sm font-semibold text-gray-600">Research Assistant Session</span>
-      </div>
-      <button id="btn-clear-chat-top" class="text-xs font-medium text-gray-400 hover:text-red-500 transition-colors px-3 py-1.5 rounded-lg hover:bg-red-50 border border-transparent hover:border-red-100">Clear Chat</button>
+  <main class="flex-1 flex flex-col h-screen overflow-hidden bg-white relative w-full min-w-0">
+    <header class="hidden md:flex items-center justify-between px-5 py-3 border-b border-gray-100 shrink-0">
+      <button id="btn-toggle-sidebar" class="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"><svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" /></svg></button>
+      <span id="chat-title" class="text-sm font-medium text-gray-400">New Chat</span>
+      <button id="btn-clear-chat" class="text-xs text-gray-400 hover:text-red-400 transition-colors px-2 py-1 rounded-lg hover:bg-red-50">Clear</button>
     </header>
 
-    <div id="chat-messages" class="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 scroll-smooth">
-      <div id="welcome-msg" class="flex flex-col items-center justify-center h-full text-center px-4">
-        <img src="/static/orbit.png" class="w-16 h-16 mb-4 shadow-sm rounded-2xl" onerror="this.style.display='none'">
-        <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome to ORBIT</h2>
-        <p class="text-gray-500 text-sm max-w-md">Your AI-powered Educational Research Assistant. Upload a document or type a prompt below to begin.</p>
+    <div id="welcome-screen" class="absolute inset-0 top-[40px] md:top-[53px] bottom-[96px] flex flex-col items-center justify-center pointer-events-none z-10 bg-white">
+      <div class="text-center select-none">
+        <div class="w-20 h-20 mx-auto mb-4 drop-shadow-md"><img src="/static/orbit.png" alt="ORBIT" class="w-full h-full object-contain" onerror="this.src='/static/icon.png'"/></div>
+        <h1 class="text-2xl font-bold text-gray-800 mb-1.5 tracking-tight">Welcome to ORBIT</h1>
+        <p class="text-sm text-gray-400 font-medium">Your Educational Research Assistant</p>
       </div>
     </div>
 
-    <div class="shrink-0 bg-white pt-2 pb-4 px-4 md:px-8 border-t border-gray-50 z-20 shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.02)]">
-      
-      <div id="attach-badge" class="hidden max-w-3xl mx-auto px-2 pb-2">
-        <div class="inline-flex items-center gap-2 bg-accent-light text-accent text-xs font-semibold px-3 py-1.5 rounded-full border border-blue-100 shadow-sm">
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>
-          <span id="attach-name" class="truncate max-w-[200px]">document.pdf</span>
-          <button id="btn-remove-attach" class="ml-1 opacity-60 hover:opacity-100 transition-opacity font-bold">✕</button>
-        </div>
-      </div>
+    <div id="chat-messages" class="flex-1 overflow-y-auto relative z-0 pb-2"></div>
 
-      <div class="max-w-3xl mx-auto flex items-center justify-between px-3 pb-1">
-        <select id="model-select" class="bg-transparent border-none text-[12px] font-semibold text-gray-400 focus:outline-none cursor-pointer px-1 hover:text-accent transition-colors appearance-none outline-none">
-            <option value="">Loading models...</option>
-        </select>
-        <span class="text-[10px] text-gray-300 font-medium hidden sm:block">ORBIT can make mistakes. Verify important information.</span>
+    <div id="attach-badge" class="hidden shrink-0 mx-auto w-full max-w-2xl px-5 pb-1">
+      <div class="inline-flex items-center gap-2 bg-accent-light text-accent text-xs font-semibold px-3 py-1.5 rounded-full">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>
+        <span id="attach-name">document.pdf</span><button id="btn-remove-attach" class="ml-0.5 opacity-60 hover:opacity-100 transition-opacity font-bold">✕</button>
       </div>
+    </div>
 
-      <div class="max-w-3xl mx-auto bg-[#f8f9fa] rounded-[1.5rem] pill-shadow border border-gray-200/80 px-3 py-2 flex flex-col focus-within:ring-2 focus-within:ring-accent/20 focus-within:border-accent/30 transition-all">
-        <div class="flex items-end gap-2">
-          <button id="btn-attach" title="Attach PDF" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-full hover:bg-white hover:shadow-sm transition-all text-gray-400 hover:text-accent">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>
-          </button>
+    <div class="shrink-0 px-3 md:px-4 pt-2 pb-4 safe-bottom relative z-20">
+      <div class="max-w-2xl mx-auto flex items-center justify-between px-2 pb-2">
+        <select id="model-select" class="bg-transparent border-none text-[11px] text-gray-400 font-medium focus:outline-none cursor-pointer max-w-[170px] px-1 hover:text-gray-600 transition-colors appearance-none"></select>
+        <p class="hidden md:block text-[10px] text-gray-300">ORBIT may make errors. Verify important academic information.</p>
+      </div>
+      <div id="input-pill" class="w-full max-w-2xl mx-auto bg-[#F8F9FA] rounded-[26px] pill-shadow flex flex-col px-2 py-2 border border-gray-200/70">
+        <div class="flex items-end gap-1.5">
+          <button id="btn-attach" title="Attach PDF" class="shrink-0 w-9 h-9 flex items-center justify-center rounded-full hover:bg-white transition-colors text-gray-400 hover:text-accent"><svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg></button>
           <input id="pdf-input" type="file" accept=".pdf" class="hidden" />
-          
-          <textarea id="chat-textarea" rows="1" placeholder="Ask ORBIT anything..." class="flex-1 bg-transparent border-none outline-none resize-none text-[15px] text-gray-800 placeholder-gray-400 py-2 leading-relaxed m-0"></textarea>
-          
-          <button id="btn-send" class="shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-accent hover:bg-accent-hover text-white transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
-            <svg class="w-4 h-4 transform rotate-90" fill="currentColor" viewBox="0 0 20 20"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path></svg>
+          <textarea id="chat-textarea" rows="1" placeholder="Ask ORBIT anything…" class="flex-1 bg-transparent border-none outline-none resize-none text-sm text-gray-800 placeholder-gray-400 py-1.5 leading-relaxed"></textarea>
+          <button id="btn-send" class="shrink-0 w-9 h-9 flex items-center justify-center rounded-full bg-accent hover:bg-accent-hover text-white transition-all shadow-sm disabled:opacity-40 disabled:cursor-not-allowed">
+            <svg id="send-icon" class="w-4 h-4 transform rotate-90" fill="currentColor" viewBox="0 0 20 20"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /></svg>
+            <svg id="loading-icon" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" /></svg>
           </button>
         </div>
       </div>
     </div>
   </main>
 
-  <div id="settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-black/30 backdrop-blur-sm p-4">
-    <div class="modal-box bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-full flex flex-col">
-      <div class="flex items-center justify-between px-6 pt-6 pb-4 border-b border-gray-100 shrink-0">
+  <div id="settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-black/30 backdrop-blur-sm">
+    <div class="modal-box bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
+      <div class="flex items-center justify-between px-6 pt-6 pb-4 border-b border-gray-100">
         <h2 class="text-base font-bold text-gray-800">Settings</h2>
-        <button id="btn-close-settings" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" /></svg>
-        </button>
-      </div>
-      <div class="px-6 py-5 space-y-5 overflow-y-auto flex-1">
-        <div>
-          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Provider</label>
-          <select id="settings-provider" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]">
-            <option value="OpenRouter">OpenRouter</option>
-            <option value="Nvidia NIM">Nvidia NIM</option>
-            <option value="Google Gemini">Google Gemini</option>
-            <option value="AgentRouter">AgentRouter</option>
-            <option value="Custom OpenAI">Custom OpenAI-Compatible</option>
-          </select>
-        </div>
-        <div>
-          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Base URL</label>
-          <input id="settings-url" type="text" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
-        </div>
-        <div>
-          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">API Key</label>
-          <input id="settings-apikey" type="password" placeholder="Enter your API Key..." class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
-        </div>
-
-        <div id="section-models-openrouter">
-          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">OpenRouter Models</label>
-          <div id="models-list-openrouter" class="bg-[#f8f9fa] border border-gray-200 rounded-xl p-2 max-h-32 overflow-y-auto space-y-1 mb-2"></div>
-          <div class="flex gap-2">
-            <input id="new-model-or" type="text" placeholder="model-id (OpenRouter)" class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
-            <button id="btn-add-model-or" class="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white text-sm font-semibold rounded-xl transition-colors">Add</button>
-          </div>
-        </div>
-
-        <div id="section-models-nvidia">
-          <label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Nvidia NIM Models</label>
-          <div id="models-list-nvidia" class="bg-[#f8f9fa] border border-gray-200 rounded-xl p-2 max-h-32 overflow-y-auto space-y-1 mb-2"></div>
-          <div class="flex gap-2">
-            <input id="new-model-nv" type="text" placeholder="model-id (Nvidia NIM)" class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
-            <button id="btn-add-model-nv" class="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white text-sm font-semibold rounded-xl transition-colors">Add</button>
-          </div>
-        </div>
+        <button id="btn-close-settings" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" /></svg></button>
       </div>
-      <div class="px-6 pb-6 flex gap-3 justify-end border-t border-gray-100 pt-4 shrink-0">
-        <button id="btn-cancel-settings" class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-xl transition-colors">Cancel</button>
-        <button id="btn-save-settings" class="px-5 py-2.5 text-sm font-semibold bg-accent hover:bg-accent-hover text-white rounded-xl shadow-sm transition-colors">Save Settings</button>
+      <div class="px-6 py-5 space-y-5">
+        <div><label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Provider</label><select id="settings-provider" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 bg-[#f8f9fa]"><option value="OpenRouter">OpenRouter</option><option value="Nvidia NIM">Nvidia NIM</option><option value="Google Gemini">Google Gemini</option><option value="AgentRouter">AgentRouter</option><option value="Custom OpenAI">Custom OpenAI-Compatible</option></select></div>
+        <div><label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Base URL</label><input id="settings-url" type="text" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 bg-[#f8f9fa]" /></div>
+        <div><label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">API Key</label><div class="relative"><input id="settings-apikey" type="password" placeholder="sk-or-v1-…" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 pr-10 text-sm text-gray-700 bg-[#f8f9fa]" /><button id="btn-toggle-key" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg></button></div></div>
+        <div id="section-models-openrouter"><label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">OpenRouter Models</label><div id="models-list-openrouter" class="bg-[#f8f9fa] border border-gray-200 rounded-xl p-2 max-h-32 overflow-y-auto space-y-1 mb-2"></div><div class="flex gap-2"><input id="new-model-or" type="text" placeholder="model-id (OpenRouter)" class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-700 bg-[#f8f9fa]" /><button id="btn-add-model-or" class="px-4 py-2 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl transition-colors">Add</button></div></div>
+        <div id="section-models-nvidia"><label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Nvidia NIM Models</label><div id="models-list-nvidia" class="bg-[#f8f9fa] border border-gray-200 rounded-xl p-2 max-h-32 overflow-y-auto space-y-1 mb-2"></div><div class="flex gap-2"><input id="new-model-nv" type="text" placeholder="model-id (Nvidia NIM)" class="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm text-gray-700 bg-[#f8f9fa]" /><button id="btn-add-model-nv" class="px-4 py-2 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl transition-colors">Add</button></div></div>
       </div>
+      <div class="px-6 pb-6 flex gap-3 justify-end border-t border-gray-100 pt-4"><button id="btn-cancel-settings" class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-xl transition-colors">Cancel</button><button id="btn-save-settings" class="px-5 py-2.5 text-sm font-semibold bg-accent hover:bg-accent-hover text-white rounded-xl shadow-sm transition-colors">Save Settings</button></div>
     </div>
   </div>
 
-  <div id="doi-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-black/30 backdrop-blur-sm p-4">
-    <div class="modal-box bg-white rounded-2xl shadow-2xl w-full max-w-md">
+  <div id="doi-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-back bg-black/30 backdrop-blur-sm">
+    <div class="modal-box bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4">
       <div class="flex items-center justify-between px-6 pt-6 pb-4 border-b border-gray-100">
         <h2 class="text-base font-bold text-gray-800">Validate DOI</h2>
-        <button id="btn-close-doi" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" /></svg>
-        </button>
+        <button id="btn-close-doi" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" /></svg></button>
       </div>
       <div class="px-6 py-5 space-y-4">
-        <input id="doi-input" type="text" placeholder="e.g. 10.1000/xyz123" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
-        <button id="btn-validate-doi-submit" class="w-full py-2.5 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl shadow-sm transition-colors flex items-center justify-center gap-2">
-          <span>Validate Reference</span>
-        </button>
+        <input id="doi-input" type="text" placeholder="e.g. 10.1000/xyz123 or https://doi.org/…" class="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-accent bg-[#f8f9fa]" />
+        <button id="btn-validate-doi" class="w-full py-2.5 bg-accent hover:bg-accent-hover text-white text-sm font-semibold rounded-xl shadow-sm transition-colors flex items-center justify-center gap-2"><span id="doi-btn-text">Validate</span><svg id="doi-spinner" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" /></svg></button>
         <div id="doi-result" class="hidden bg-[#f8f9fa] border border-gray-200 rounded-xl p-4 text-sm text-gray-700"></div>
       </div>
     </div>
   </div>
 
   <script src="/static/js/script.js"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js', { scope: '/' }));
+    }
+  </script>
 </body>
 </html>