Mobile redesign estilo ChatGPT: centrado, limpio, input fijo, chips en grid, sin download section

frontend/index.html

@@ -21,7 +21,7 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Styrene+A:wght@400;500;700&display=swap"
         rel="stylesheet">
-    <link rel="stylesheet" href="/static/styles.css?v=100">
+    <link rel="stylesheet" href="/static/styles.css?v=200">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
 </head>
 
@@ -683,7 +683,7 @@
         </div>
     </div>
 
-    <script src="/static/app.js?v=100"></script>
+    <script src="/static/app.js?v=200"></script>
 
     <!-- PWA: Service Worker Registration -->
     <script>

frontend/styles.css

@@ -1363,155 +1363,203 @@ body {
     margin-top: 12px;
 }
 
-/* ===== RESPONSIVE ===== */
+/* ===== RESPONSIVE — ChatGPT / Claude-style Mobile ===== */
 @media (max-width: 768px) {
+
+    /* ---- Mobile Header Bar ---- */
     .mobile-header-bar {
         display: flex;
     }
 
+    /* ---- Sidebar Backdrop ---- */
     .sidebar-backdrop {
         display: block;
     }
 
-    .sidebar:not(.collapsed) ~ .sidebar-backdrop {
+    .sidebar:not(.collapsed)~.sidebar-backdrop {
         opacity: 1;
         pointer-events: auto;
     }
 
+    /* ---- Sidebar Drawer ---- */
     .sidebar {
         position: fixed;
         left: 0;
         top: 0;
         bottom: 0;
         z-index: 300;
-        width: 82%;
-        max-width: 310px;
-        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.6);
-        border-right: 1px solid rgba(255, 255, 255, 0.1);
+        width: 80%;
+        max-width: 300px;
+        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
+        border-right: 1px solid rgba(255, 255, 255, 0.06);
         transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .sidebar.collapsed {
         transform: translateX(-100%);
-        width: 82%;
-        min-width: 82%;
+        width: 80%;
+        min-width: 80%;
     }
 
     .mobile-sidebar-toggle {
         display: flex;
     }
 
-    .sidebar:not(.collapsed)~.mobile-sidebar-toggle {
-        display: flex;
-    }
-
     #toggleSidebar {
         display: flex;
     }
 
+    /* ---- Main Content ---- */
     .main-content {
         padding-top: 54px;
         height: 100vh;
         overflow-y: auto;
     }
 
+    /* ---- Hide Notification Bar (info is in mobile header) ---- */
     .notification-bar {
         display: none;
     }
 
+    /* ---- Welcome Screen: Centered like ChatGPT ---- */
     .welcome-screen {
-        padding: 24px 16px 40px;
-        justify-content: flex-start;
+        padding: 0 20px 120px;
+        justify-content: center;
+        align-items: center;
         min-height: calc(100vh - 54px);
+        gap: 0;
     }
 
+    /* ---- Logo: Smaller, subtle ---- */
     .welcome-logo {
-        margin-top: 12px;
-        margin-bottom: 12px !important;
+        margin-bottom: 16px !important;
         gap: 10px !important;
     }
 
     .welcome-logo svg {
-        width: 44px !important;
-        height: 44px !important;
+        width: 36px !important;
+        height: 36px !important;
     }
 
     .welcome-logo-text {
-        font-size: 2.2rem !important;
+        font-size: 1.8rem !important;
     }
 
+    /* ---- Heading: The main centered greeting ---- */
     .welcome-heading {
-        font-size: 1.1rem !important;
-        margin-bottom: 24px !important;
-        line-height: 1.35;
+        font-size: 1.35rem !important;
+        font-weight: 500 !important;
+        margin-bottom: 0 !important;
+        line-height: 1.3;
         color: var(--text-secondary);
-        padding: 0 8px;
+        text-align: center;
+        padding: 0;
+        font-family: var(--font-family) !important;
+    }
+
+    /* ---- Hide welcome input on mobile (use fixed bottom input) ---- */
+    .welcome-input-container {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        max-width: 100%;
+        margin-bottom: 0;
+        padding: 10px 14px 16px;
+        background: var(--bg-primary);
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        z-index: 100;
+    }
+
+    .welcome-input-wrapper {
+        border-radius: 24px;
+        background: var(--bg-input);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 6px 10px;
+        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
     }
 
+    .welcome-input {
+        font-size: 0.95rem !important;
+        padding: 10px 8px !important;
+    }
+
+    /* ---- Suggestion Chips: Inline, compact, 2-column grid ---- */
     .suggestion-chips {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
         gap: 8px;
         width: 100%;
-        max-width: 100%;
-        padding: 0 4px;
-        margin-top: 12px;
+        max-width: 360px;
+        padding: 0;
+        margin-top: 20px;
     }
 
     .chip {
-        width: auto;
+        width: 100%;
         max-width: none;
-        flex: 0 1 auto;
-        font-size: 0.8rem;
-        padding: 8px 14px;
-        border-radius: 20px;
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        font-size: 0.78rem;
+        padding: 10px 10px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        justify-content: flex-start;
+        text-align: left;
+        transition: all 0.15s ease;
     }
 
     .chip:active {
-        transform: scale(0.96);
-        background: rgba(16, 185, 129, 0.15);
-        border-color: var(--accent-primary);
+        transform: scale(0.97);
+        background: rgba(85, 201, 112, 0.1);
+        border-color: rgba(85, 201, 112, 0.3);
     }
 
-    .welcome-input-container {
-        max-width: 100%;
-        padding: 0;
+    .chip-icon {
+        font-size: 0.85rem;
     }
 
-    .welcome-input-wrapper {
-        border-radius: 16px;
-        background: rgba(30, 41, 59, 0.7);
-        backdrop-filter: blur(12px);
-        border: 1px solid rgba(255, 255, 255, 0.12);
-        padding: 12px;
+    /* ---- Download Section: Hidden on mobile ---- */
+    .welcome-download-section {
+        display: none;
     }
 
+    /* ---- Chat Messages ---- */
     .message-inner {
-        padding: 0 10px;
+        padding: 0 14px;
         gap: 10px;
     }
 
+    .message {
+        padding: 16px 0;
+    }
+
+    .message-avatar {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+    }
+
     .chat-messages {
-        padding-bottom: 90px;
+        padding-bottom: 100px;
     }
 
+    /* ---- Chat Input: Fixed bottom bar ---- */
     .chat-input-container {
-        padding: 8px 12px 14px;
+        padding: 10px 14px 16px;
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
-        background: rgba(15, 23, 42, 0.92);
-        backdrop-filter: blur(16px);
-        border-top: 1px solid rgba(255, 255, 255, 0.08);
+        background: var(--bg-primary);
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
         z-index: 100;
     }
 
+    .chat-input-wrapper {
+        border-radius: 24px;
+    }
+
+    /* ---- Misc Mobile Fixes ---- */
     .upload-type-selector {
         grid-template-columns: repeat(2, 1fr);
     }
@@ -1521,41 +1569,29 @@ body {
         padding: 6px;
     }
 
-    .welcome-download-section {
-        margin-top: 28px;
-        width: 100%;
-    }
-
-    .welcome-download-section h2 {
-        font-size: 1.15rem !important;
-        margin-bottom: 12px !important;
-    }
-
-    .download-cards-container {
-        grid-template-columns: 1fr;
-        gap: 10px;
+    /* ---- Upload Modal fixes ---- */
+    .upload-modal {
+        max-width: 92vw;
+        max-height: 85vh;
     }
+}
 
-    .download-card {
-        padding: 14px 16px;
-        background: rgba(30, 41, 59, 0.5);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 14px;
+@media (max-width: 480px) {
+    .welcome-logo svg {
+        width: 32px !important;
+        height: 32px !important;
     }
 
-    .download-card .card-icon {
-        width: 38px;
-        height: 38px;
+    .welcome-logo-text {
+        font-size: 1.6rem !important;
     }
-}
 
-@media (max-width: 480px) {
     .welcome-heading {
-        font-size: 1.05rem !important;
+        font-size: 1.2rem !important;
     }
 
     .sidebar {
-        width: 85%;
+        width: 88%;
         max-width: 320px;
     }
 
@@ -1564,20 +1600,23 @@ body {
     }
 
     .suggestion-chips {
+        max-width: 100%;
         gap: 6px;
     }
 
     .chip {
-        font-size: 0.78rem;
-        padding: 7px 12px;
+        font-size: 0.75rem;
+        padding: 9px 8px;
+        border-radius: 10px;
     }
 
-    .chat-input-container {
-        padding: 8px 10px 12px;
+    .chat-input-container,
+    .welcome-input-container {
+        padding: 8px 10px 14px;
     }
 
     .model-name {
-        max-width: 90px;
+        max-width: 85px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;