Upload app.py

app.py

@@ -527,6 +527,23 @@ button, input, select, textarea {
     font-size: 0.6rem !important;
 }
 
+/* Mobil responsive başlangıç */
+@media (max-width: 768px) {
+    .gradio-container, .gradio-container *, .message-wrap, .message-wrap p, .message-wrap div {
+        font-size: 0.8rem !important;
+    }
+    
+    h1 {
+        font-size: 1.8rem !important;
+        text-align: center;
+        margin: 10px 0;
+    }
+    
+    h2 {
+        font-size: 1.4rem !important;
+    }
+}
+
 /* Input alanı için de aynı boyut */
 .message-textbox textarea {
     font-size: 0.6rem !important;
@@ -612,6 +629,44 @@ h3 {
     background: white;
 }
 
+/* Mobil responsive - Chatbot */
+@media (max-width: 768px) {
+    #chatbot {
+        height: 60vh !important;
+        margin: 10px 0;
+    }
+    
+    .gradio-container {
+        padding: 8px !important;
+        margin: 0 !important;
+    }
+    
+    /* Mesaj baloncukları mobilde daha küçük */
+    .message-wrap {
+        max-width: 95% !important;
+        margin: 0.3rem 0 !important;
+        padding: 8px 12px !important;
+        border-radius: 18px !important;
+        font-size: 0.9rem !important;
+    }
+    
+    /* Kullanıcı mesajları */
+    .user-message, .user-message-highlighted {
+        background-color: #007AFF !important;
+        color: white !important;
+        margin-left: auto !important;
+        margin-right: 8px !important;
+    }
+    
+    /* Bot mesajları */
+    .bot-message, .bot-message-highlighted {
+        background-color: #f1f1f1 !important;
+        color: #333 !important;
+        margin-left: 8px !important;
+        margin-right: auto !important;
+    }
+}
+
 /* Input alanına uçan kağıt ikonu ekle */
 #msg-input {
     position: relative;
@@ -632,10 +687,81 @@ h3 {
     color: #666;
 }
 
+/* Mobil responsive - Input alanı */
+@media (max-width: 768px) {
+    #msg-input {
+        margin: 10px 0;
+    }
+    
+    #msg-input textarea {
+        padding: 12px 45px 12px 15px !important;
+        font-size: 1rem !important;
+        border-radius: 20px !important;
+        border: 2px solid #e0e0e0 !important;
+        min-height: 50px !important;
+    }
+    
+    #msg-input textarea:focus {
+        border-color: #007AFF !important;
+        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
+    }
+    
+    .input-icon {
+        right: 15px;
+        font-size: 18px;
+    }
+    
+    /* Ürün galeri mobil responsive */
+    .product-gallery {
+        gap: 8px !important;
+        margin: 8px 0 !important;
+    }
+    
+    .product-card {
+        max-width: 140px !important;
+        padding: 6px !important;
+        font-size: 0.8rem !important;
+    }
+    
+    .product-card img {
+        max-width: 120px !important;
+        max-height: 80px !important;
+    }
+    
+    /* Resimler mobilde daha küçük */
+    #chatbot .message img {
+        max-width: 250px !important;
+        max-height: 150px !important;
+        border-radius: 12px !important;
+        margin: 6px 0 !important;
+    }
+    
+    /* Tablo responsive */
+    table {
+        font-size: 0.8rem !important;
+        overflow-x: auto !important;
+        display: block !important;
+        white-space: nowrap !important;
+    }
+    
+    table th, table td {
+        padding: 4px 6px !important;
+        min-width: 60px !important;
+    }
+}
+
 /* JavaScript ile placeholder eklemek için */
 </style>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    // Viewport meta tag ekle (mobil için)
+    if (!document.querySelector('meta[name="viewport"]')) {
+        const viewport = document.createElement('meta');
+        viewport.name = 'viewport';
+        viewport.content = 'width=device-width, initial-scale=1.0, user-scalable=no';
+        document.head.appendChild(viewport);
+    }
+    
     // Input alanına uçan kağıt ikonu ekle
     setTimeout(function() {
         const msgInput = document.querySelector('#msg-input');
@@ -666,12 +792,12 @@ document.addEventListener('DOMContentLoaded', function() {
 def enhanced_chatbot_fn(message, history, image):
     return chatbot_fn(message, history, image)
 
-# Demo arayüzü - Özel layout ile image upload destekli
+# Demo arayüzü - Mobil responsive
 with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı") as demo:
     gr.Markdown("# 🚲 Trek Asistanı AI")
     gr.Markdown("**Akıllı özellikler:** Ürün karşılaştırması, kişisel öneriler ve detaylı ürün bilgileri sunuyorum.")
     
-    chatbot = gr.Chatbot(height=500, elem_id="chatbot", show_label=False)
+    chatbot = gr.Chatbot(height=600, elem_id="chatbot", show_label=False)
     
     msg = gr.Textbox(
         placeholder="Trek bisikletleri hakkında soru sorun...",