Update app.py

app.py

@@ -472,188 +472,279 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
     def create_interface(self):
         """Create Gradio interface with refined ChatGPT-like design"""
         css = """
+        /* ==================== BASE STYLES ==================== */
+        :root {
+            --primary-color: #007bff;
+            --primary-dark: #0056b3;
+            --border-radius: 12px;
+            --transition: all 0.3s ease;
+            --shadow: 0 4px 12px rgba(0,0,0,0.15);
+            --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            --background: #ffffff;
+            --text-color: #333333;
+            --chat-bg: #f9fafb;
+            --message-bg: #e5e5ea;
+            --sidebar-bg: rgba(241, 243, 245, 0.9);
+            --sidebar-dark-bg: rgba(42, 54, 80, 0.9);
+        }
+
+        [data-theme="dark"] {
+            --background: #1e2a44;
+            --text-color: #ffffff;
+            --chat-bg: #2d3b55;
+            --message-bg: #3e4c6a;
+            --sidebar-bg: var(--sidebar-dark-bg);
+        }
+
         body, .gradio-container {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            font-family: var(--font-family);
             background: var(--background);
             color: var(--text-color);
-            transition: all 0.4s ease;
+            margin: 0;
+            padding: 0;
+            transition: var(--transition);
         }
+
+        /* ==================== LAYOUT ==================== */
         .gradio-container {
-            max-width: 800px;
+            max-width: 900px;
             margin: 0 auto;
-            padding: 24px;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
         }
+
         .chat-container {
             background: var(--chat-bg);
-            border-radius: 16px;
-            padding: 24px;
-            height: 80vh;
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            min-height: 60vh;
+            max-height: 80vh;
             overflow-y: auto;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            box-shadow: var(--shadow);
             position: relative;
+            margin-bottom: 5rem; /* Space for sticky input */
         }
-        .message {
-            margin: 12px 0;
-            padding: 12px 16px;
-            border-radius: 12px;
-            max-width: 80%;
-            transition: all 0.3s ease;
+
+        .header {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .header h1 {
+            font-size: 1.8rem;
+            margin: 0.5rem 0;
+        }
+
+        .header p {
+            font-size: 1rem;
+            opacity: 0.7;
+        }
+
+        /* ==================== COMPONENTS ==================== */
+        .chat__message {
+            margin: 0.75rem 0;
+            padding: 0.75rem 1rem;
+            border-radius: var(--border-radius);
+            max-width: 85%;
+            transition: var(--transition);
             background: var(--message-bg);
-            position: relative;
+            border: 1px solid rgba(0,0,0,0.05);
             animation: messageFade 0.3s ease;
         }
-        .message:hover {
+
+        .chat__message:hover {
             transform: translateY(-2px);
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        .message.user {
-            background: linear-gradient(135deg, #007bff, #0056b3);
+
+        .chat__message.user {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
             color: white;
             margin-left: auto;
         }
-        .message.assistant {
+
+        .chat__message.assistant {
             background: var(--message-bg);
             color: var(--text-color);
         }
-        .message-timestamp {
-            font-size: 0.75em;
+
+        .chat__message-timestamp {
+            font-size: 0.75rem;
             opacity: 0.7;
-            margin-top: 4px;
+            margin-top: 0.25rem;
             text-align: right;
         }
+
         .input-container {
             display: flex;
             align-items: center;
-            margin-top: 24px;
+            gap: 0.75rem;
             background: var(--chat-bg);
-            padding: 12px 24px;
-            border-radius: 30px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+            padding: 0.75rem 1rem;
+            border-radius: 1.5rem;
+            box-shadow: var(--shadow);
             position: sticky;
-            bottom: 0;
+            bottom: 1rem;
+            z-index: 10;
         }
+
         .input-textbox {
             flex-grow: 1;
             border: none;
             background: transparent;
             color: var(--text-color);
             outline: none;
-            font-size: 1em;
+            font-size: 1rem;
         }
+
         .input-textbox:focus {
-            border-bottom: 2px solid #007bff;
+            border-bottom: 2px solid var(--primary-color);
         }
+
         .send-btn {
-            background: linear-gradient(135deg, #007bff, #0056b3);
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
             color: white;
             border: none;
-            border-radius: 20px;
-            padding: 10px 20px;
-            margin-left: 12px;
-            transition: transform 0.2s ease;
+            border-radius: 1rem;
+            padding: 0.5rem 1.25rem;
+            font-size: 0.9rem;
+            transition: var(--transition);
         }
+
         .send-btn:hover {
             transform: scale(1.05);
         }
+
         .send-btn:active {
             animation: glow 0.3s ease;
         }
+
         .sidebar {
             background: var(--sidebar-bg);
-            padding: 24px;
-            border-radius: 16px;
-            margin-top: 24px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            transition: transform 0.4s ease;
-            transform: translateX(0);
+            padding: 1.5rem;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            transition: transform 0.4s ease, opacity 0.4s ease;
             position: fixed;
-            right: 0;
-            top: 100px;
-            width: 300px;
+            right: 1rem;
+            top: 5rem;
+            width: 320px;
+            max-height: calc(100vh - 6rem);
+            overflow-y: auto;
             z-index: 1000;
-            backdrop-filter: blur(10px);
-            background: rgba(241, 243, 245, 0.8);
+            animation: fadeInUp 0.4s ease;
         }
+
         .sidebar-hidden {
             transform: translateX(100%);
+            opacity: 0;
         }
+
         .sidebar-backdrop {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0,0,0,0.3);
+            background: rgba(0,0,0,0.4);
             z-index: 999;
-            display: none;
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            pointer-events: none;
         }
+
         .sidebar:not(.sidebar-hidden) ~ .sidebar-backdrop {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .sidebar__tooltip, .file-tooltip {
             display: block;
+            margin-bottom: 1rem;
         }
-        .header {
+
+        .sidebar__tooltip:hover::after, .file-tooltip:hover::after {
+            content: attr(data-tip);
+            position: absolute;
+            top: -2.5rem;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #333;
+            color: white;
+            padding: 0.4rem 0.8rem;
+            border-radius: 0.4rem;
+            font-size: 0.85rem;
+            max-width: 200px;
+            white-space: normal;
             text-align: center;
-            margin-bottom: 24px;
+            z-index: 1000;
+            animation: fadeIn 0.3s ease;
         }
+
         .theme-toggle {
-            position: absolute;
-            top: 24px;
-            right: 24px;
-            background: linear-gradient(135deg, #007bff, #0056b3);
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
             color: white;
             border: none;
-            border-radius: 20px;
-            padding: 8px 16px;
+            border-radius: 1rem;
+            padding: 0.5rem 1rem;
+            font-size: 0.9rem;
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            z-index: 100;
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 0.5rem;
         }
-        .tooltip {
-            position: relative;
+
+        .tools-button {
+            background: var(--message-bg);
+            color: var(--text-color);
+            border: none;
+            border-radius: 1rem;
+            padding: 0.5rem 1.25rem;
+            font-size: 0.9rem;
+            transition: var(--transition);
         }
-        .tooltip:hover::after {
-            content: attr(data-tip);
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #333;
+
+        .tools-button:hover {
+            background: var(--primary-color);
             color: white;
-            padding: 6px 12px;
-            border-radius: 6px;
-            font-size: 0.85em;
-            white-space: nowrap;
-            z-index: 1000;
-            animation: fadeIn 0.3s ease;
-        }
-        .markdown-tooltip, .file-tooltip {
-            display: block;
         }
+
         .loading-spinner {
             position: absolute;
-            bottom: 80px;
+            bottom: 4rem;
             left: 50%;
             transform: translateX(-50%);
-            font-size: 1.2em;
+            font-size: 1.2rem;
             animation: glow 1.5s ease infinite;
         }
+
         .typing-indicator {
             display: none;
-            font-size: 0.9em;
+            font-size: 0.9rem;
             color: var(--text-color);
             opacity: 0.7;
-            margin: 12px;
+            margin: 0.75rem;
         }
+
         .typing-indicator.active {
             display: block;
             animation: blink 1s step-end infinite;
         }
+
         .progress-text {
             position: relative;
-            padding: 8px;
+            padding: 0.5rem;
             background: var(--message-bg);
-            border-radius: 8px;
-            margin-top: 12px;
+            border-radius: var(--border-radius);
+            margin-top: 0.75rem;
+            overflow: hidden;
         }
+
         .progress-text::before {
             content: '';
             position: absolute;
@@ -661,66 +752,122 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             left: 0;
             height: 100%;
             width: 0;
-            background: #007bff;
-            opacity: 0.2;
-            animation: progress 2s linear infinite;
+            background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
+            opacity: 0.3;
+            animation: progress 2s ease-in-out infinite;
         }
+
+        /* ==================== ANIMATIONS ==================== */
         @keyframes glow {
-            0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; color: #007bff; }
-            50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; color: #0056b3; }
+            0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; color: var(--primary-color); }
+            50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; color: var(--primary-dark); }
         }
+
         @keyframes blink {
             50% { opacity: 0.3; }
         }
+
         @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
-        @keyframes progress {
-            0% { width: 0; }
-            50% { width: 50%; }
-            100% { width: 0; }
-        }
-        @keyframes messageFade {
-            from { opacity: 0; transform: translateY(10px); }
+
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
         }
-        :root {
-            --background: #ffffff;
-            --text-color: #333333;
-            --chat-bg: #f9fafb;
-            --message-bg: #e5e5ea;
-            --sidebar-bg: #f1f3f5;
+
+        @keyframes messageFade {
+            from { opacity: 0; transform: translateY(10px) scale(0.95); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
         }
-        [data-theme="dark"] {
-            --background: #1e2a44;
-            --text-color: #ffffff;
-            --chat-bg: #2d3b55;
-            --message-bg: #3e4c6a;
-            --sidebar-bg: #2a3650;
+
+        @keyframes progress {
+            0% { width: 0; }
+            50% { width: 60%; }
+            100% { width: 0; }
         }
-        @media (max-width: 600px) {
+
+        /* ==================== MEDIA QUERIES ==================== */
+        @media (max-width: 768px) {
             .gradio-container {
-                padding: 12px;
+                padding: 1rem;
+            }
+
+            .chat-container {
+                min-height: 50vh;
+                max-height: 70vh;
+                margin-bottom: 4rem;
+            }
+
+            .sidebar {
+                width: 100%;
+                right: 0;
+                top: 4rem;
+                max-height: calc(100vh - 4rem);
+            }
+
+            .theme-toggle {
+                top: 0.5rem;
+                right: 0.5rem;
+                padding: 0.4rem 0.8rem;
+                font-size: 0.85rem;
+            }
+
+            .input-container {
+                gap: 0.5rem;
+                padding: 0.5rem;
+            }
+
+            .send-btn {
+                padding: 0.4rem 1rem;
             }
+        }
+
+        @media (max-width: 480px) {
             .chat-container {
-                height: 70vh;
+                padding: 1rem;
+                margin-bottom: 3.5rem;
             }
+
             .input-container {
                 flex-direction: column;
-                gap: 12px;
-                padding: 12px;
+                padding: 0.5rem;
             }
+
+            .input-textbox {
+                font-size: 0.9rem;
+            }
+
             .send-btn {
                 width: 100%;
-                margin-left: 0;
+                padding: 0.5rem;
+                font-size: 0.85rem;
+            }
+
+            .chat__message {
+                max-width: 90%;
+                padding: 0.5rem 0.75rem;
             }
+
+            .header h1 {
+                font-size: 1.5rem;
+            }
+
+            .header p {
+                font-size: 0.9rem;
+            }
+
             .sidebar {
-                width: 100%;
-                top: 80px;
+                top: 3.5rem;
+                max-height: calc(100vh - 3.5rem);
+                animation: fadeInUp 0.4s ease;
             }
-            .sidebar-hidden {
-                transform: translateX(100%);
+
+            .sidebar__tooltip:hover::after, .file-tooltip:hover::after {
+                top: auto;
+                bottom: -2.5rem;
+                max-width: 80vw;
             }
         }
         """
@@ -781,11 +928,11 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                     gr.HTML("<div class='typing-indicator'>Typing...</div>")
                 
                 with gr.Row():
-                    tools_button = gr.Button("📂 Tools", variant="secondary")
+                    tools_button = gr.Button("📂 Tools", variant="secondary", elem_classes="tools-button")
                 
                 with gr.Column(elem_classes="sidebar"):
                     gr.Markdown(
-                        "<div class='tooltip' data-tip='Upload patient records'>### 📎 Upload Records</div>",
+                        "<div class='sidebar__tooltip' data-tip='Upload patient records'>### 📎 Upload Records</div>",
                         elem_classes="markdown-tooltip"
                     )
                     gr.HTML(
@@ -799,15 +946,15 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                     )
                     gr.HTML("</div>")
                     gr.Markdown(
-                        "<div class='tooltip' data-tip='Summary of findings'>### 📝 Analysis Summary</div>",
+                        "<div class='sidebar__tooltip' data-tip='Summary of findings'>### 📝 Analysis Summary</div>",
                         elem_classes="markdown-tooltip"
                     )
                     final_summary = gr.Markdown(
-                        "<div class='tooltip' data-tip='View analysis results'>Analysis results will appear here...</div>",
+                        "<div class='sidebar__tooltip' data-tip='View analysis results'>Analysis results will appear here...</div>",
                         elem_classes="markdown-tooltip"
                     )
                     gr.Markdown(
-                        "<div class='tooltip' data-tip='Download full report'>### 📄 Full Report</div>",
+                        "<div class='sidebar__tooltip' data-tip='Download full report'>### 📄 Full Report</div>",
                         elem_classes="markdown-tooltip"
                     )
                     gr.HTML(
@@ -859,7 +1006,6 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                     fn=self.toggle_theme,
                     inputs=[theme_state],
                     outputs=[theme_state, theme_button]
-                    
                 )
 
                 # Sidebar toggle handler
@@ -918,7 +1064,7 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                 
                 app.load(
                     fn=lambda: [
-                        [], None, "<div class='tooltip' data-tip='View analysis results'>Analysis results will appear here...</div>", 
+                        [], None, "<div class='sidebar__tooltip' data-tip='View analysis results'>Analysis results will appear here...</div>", 
                         "", None, {"visible": False}, "light", False, "🌙 Dark Mode"
                     ],
                     outputs=[chatbot, download_output, final_summary, msg_input, file_upload, progress_text, theme_state, sidebar_state, theme_button],