UI/UX Redesign: Clean Chat-Style Interface - User Friendly

app.py

@@ -2200,31 +2200,24 @@ def _format_final(steps_done, crew_member, final_text):
 # ============================================================
 
 GEMINI_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Myanmar:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Myanmar:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
-    --ai-blue: #8ab4f8;
-    --ai-purple: #c58af9;
-    --ai-pink: #f28b82;
-    --ai-green: #81c995;
-    --ai-yellow: #fdd663;
-    --ai-cyan: #78d9ff;
-    --ai-bg: #0d0d0f;
-    --ai-bg2: #111114;
-    --ai-surface: rgba(255,255,255,0.04);
-    --ai-surface2: rgba(255,255,255,0.07);
-    --ai-surface3: rgba(255,255,255,0.10);
-    --ai-glass: rgba(255,255,255,0.06);
-    --ai-glass2: rgba(255,255,255,0.10);
-    --ai-border: rgba(255,255,255,0.08);
-    --ai-border2: rgba(255,255,255,0.14);
-    --ai-text: #e8eaed;
-    --ai-text2: #9aa0a6;
-    --ai-text3: #5f6368;
-    --ai-accent: #8ab4f8;
-    --ai-user-bg: rgba(138,180,248,0.12);
-    --ai-bot-bg: rgba(255,255,255,0.03);
-    --ai-glow: rgba(138,180,248,0.15);
+    --bg-primary: #0f0f11;
+    --bg-surface: #1a1a2e;
+    --bg-glass: rgba(255,255,255,0.04);
+    --bg-glass-hover: rgba(255,255,255,0.07);
+    --border-subtle: rgba(255,255,255,0.08);
+    --border-hover: rgba(255,255,255,0.14);
+    --accent-primary: #6c63ff;
+    --accent-secondary: #00d4aa;
+    --user-bubble-bg: rgba(108,99,255,0.15);
+    --user-bubble-border: rgba(108,99,255,0.25);
+    --bot-bubble-bg: rgba(255,255,255,0.03);
+    --bot-bubble-border: rgba(255,255,255,0.06);
+    --text-primary: #e8eaed;
+    --text-secondary: #9aa0a6;
+    --text-muted: #5f6368;
     --font-main: 'Inter', 'Noto Sans Myanmar', system-ui, -apple-system, sans-serif;
     --font-mono: 'JetBrains Mono', 'Courier New', monospace;
 }
@@ -2232,237 +2225,115 @@ GEMINI_CSS = """
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
-    background: var(--ai-bg) !important;
+    background: var(--bg-primary) !important;
     font-family: var(--font-main) !important;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
+    color: var(--text-primary);
 }
 
-/* ===== AMBIENT BACKGROUND ===== */
-.ambient-bg {
-    position: fixed;
-    top: 0; left: 0; width: 100%; height: 100%;
-    pointer-events: none;
-    z-index: 0;
-    overflow: hidden;
-}
-.ambient-orb {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(120px);
-    opacity: 0.15;
-    animation: orb-float 20s ease-in-out infinite;
-}
-.ambient-orb:nth-child(1) {
-    width: 600px; height: 600px;
-    background: radial-gradient(circle, #8ab4f8, transparent 70%);
-    top: -200px; left: -100px;
-    animation-delay: 0s;
-}
-.ambient-orb:nth-child(2) {
-    width: 500px; height: 500px;
-    background: radial-gradient(circle, #c58af9, transparent 70%);
-    top: 50%; right: -150px;
-    animation-delay: -7s;
-}
-.ambient-orb:nth-child(3) {
-    width: 400px; height: 400px;
-    background: radial-gradient(circle, #f28b82, transparent 70%);
-    bottom: -100px; left: 30%;
-    animation-delay: -14s;
-}
-@keyframes orb-float {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    33% { transform: translate(30px, -40px) scale(1.1); }
-    66% { transform: translate(-20px, 20px) scale(0.95); }
-}
-
+/* ===== GRADIO CONTAINER ===== */
 .gradio-container {
-    max-width: 900px !important;
+    max-width: 860px !important;
     margin: 0 auto !important;
     font-family: var(--font-main) !important;
     background: transparent !important;
-    padding: 0 20px !important;
-    position: relative;
-    z-index: 1;
+    padding: 0 16px !important;
 }
 
 /* ===== HEADER ===== */
-.ai-header {
+.crew-header {
     text-align: center;
-    padding: 36px 20px 12px;
-    position: relative;
+    padding: 28px 16px 8px;
 }
-.ai-logo-row {
+.crew-header-row {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 16px;
-    margin-bottom: 8px;
+    gap: 14px;
+    margin-bottom: 6px;
 }
-.ai-logo-icon {
-    width: 56px; height: 56px;
-    background: linear-gradient(135deg, #8ab4f8 0%, #c58af9 40%, #f28b82 70%, #fdd663 100%);
-    border-radius: 18px;
+.crew-logo {
+    width: 44px; height: 44px;
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    border-radius: 14px;
     display: flex; align-items: center; justify-content: center;
-    font-size: 28px; color: #fff;
-    box-shadow: 0 8px 32px rgba(138,180,248,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
-    animation: ai-breathe 4s ease-in-out infinite;
-    position: relative;
-    overflow: hidden;
+    font-size: 22px; color: #fff;
+    box-shadow: 0 4px 20px rgba(108,99,255,0.3);
+    flex-shrink: 0;
 }
-.ai-logo-icon::after {
-    content: '';
-    position: absolute;
-    top: -50%; left: -50%;
-    width: 200%; height: 200%;
-    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
-    animation: shimmer 3s ease-in-out infinite;
-}
-@keyframes ai-breathe {
-    0%, 100% { box-shadow: 0 8px 32px rgba(138,180,248,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset; transform: scale(1); }
-    50% { box-shadow: 0 12px 44px rgba(197,138,249,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset; transform: scale(1.03); }
-}
-@keyframes shimmer {
-    0% { transform: translateX(-100%) rotate(25deg); }
-    100% { transform: translateX(100%) rotate(25deg); }
-}
-.ai-title {
-    font-size: 36px;
-    font-weight: 800;
-    background: linear-gradient(135deg, #8ab4f8 0%, #c58af9 30%, #f28b82 60%, #fdd663 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: -1px;
-    background-size: 200% auto;
-    animation: gradient-shift 6s ease infinite;
-}
-@keyframes gradient-shift {
-    0%, 100% { background-position: 0% center; }
-    50% { background-position: 100% center; }
-}
-.ai-subtitle {
-    color: var(--ai-text2);
-    font-size: 14px;
-    margin-top: 6px;
-    letter-spacing: 0.5px;
+.crew-title {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.5px;
+}
+.crew-subtitle {
+    color: var(--text-secondary);
+    font-size: 13px;
+    margin-top: 4px;
     font-weight: 400;
 }
 
 /* ===== STATS BAR ===== */
-.ai-stats {
+.crew-stats {
     display: flex;
     justify-content: center;
-    gap: 8px;
-    padding: 12px 0 4px;
-    flex-wrap: wrap;
-}
-.ai-stat-chip {
-    display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 6px 14px;
-    border-radius: 24px;
-    background: var(--ai-glass);
-    border: 1px solid var(--ai-border);
+    padding: 10px 0 4px;
+    flex-wrap: wrap;
     font-size: 13px;
-    color: var(--ai-text2);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ai-stat-chip:hover {
-    background: var(--ai-glass2);
-    border-color: var(--ai-border2);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
-}
-.ai-stat-chip .stat-val {
-    font-weight: 700;
-    font-size: 14px;
+    color: var(--text-muted);
 }
-.stat-blue .stat-val { color: #8ab4f8; }
-.stat-purple .stat-val { color: #c58af9; }
-.stat-pink .stat-val { color: #f28b82; }
-.stat-green .stat-val { color: #81c995; }
-
-/* ===== CREW PILLS - GLASS ===== */
-.crew-pills {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 5px;
-    padding: 10px 4px 6px;
-    max-width: 800px;
-    margin: 0 auto;
+.crew-stats .stat-sep {
+    color: var(--border-subtle);
+    margin: 0 2px;
 }
-.crew-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border-radius: 20px;
-    background: var(--ai-glass);
-    border: 1px solid var(--ai-border);
-    font-size: 12px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: default;
-    white-space: nowrap;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+.crew-stats .stat-val {
+    font-weight: 600;
+    color: var(--accent-primary);
 }
-.crew-pill:hover {
-    background: var(--ai-glass2);
-    border-color: var(--ai-border2);
-    transform: translateY(-2px) scale(1.04);
-    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+.crew-stats .stat-free {
+    font-weight: 600;
+    color: var(--accent-secondary);
 }
-.pill-emoji { font-size: 13px; }
-.pill-name { color: var(--ai-text2); font-weight: 500; font-size: 11.5px; }
 
-/* ===== CHATBOT - GLASSMORPHISM ===== */
+/* ===== CHATBOT ===== */
 .chatbot {
-    background: var(--ai-glass) !important;
-    border: 1px solid var(--ai-border) !important;
-    border-radius: 24px !important;
-    min-height: 480px !important;
-    backdrop-filter: blur(20px) !important;
-    -webkit-backdrop-filter: blur(20px) !important;
-    box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
+    background: var(--bg-glass) !important;
+    border: 1px solid var(--border-subtle) !important;
+    border-radius: 16px !important;
+    min-height: 500px !important;
 }
 
 /* User message bubble */
 .chatbot .message.user {
-    background: var(--ai-user-bg) !important;
-    border-radius: 20px 20px 4px 20px !important;
-    padding: 14px 20px !important;
-    margin-left: 48px !important;
-    border: 1px solid rgba(138,180,248,0.15) !important;
-    backdrop-filter: blur(8px) !important;
-    box-shadow: 0 2px 12px rgba(138,180,248,0.08) !important;
+    background: var(--user-bubble-bg) !important;
+    border-radius: 18px 18px 4px 18px !important;
+    padding: 12px 18px !important;
+    margin-left: 40px !important;
+    border: 1px solid var(--user-bubble-border) !important;
 }
 
 /* Assistant message bubble */
 .chatbot .message.assistant,
 .chatbot .message.bot {
-    background: var(--ai-bot-bg) !important;
-    border-radius: 20px 20px 20px 4px !important;
-    padding: 16px 22px !important;
-    margin-right: 48px !important;
-    border: 1px solid var(--ai-border) !important;
-    backdrop-filter: blur(8px) !important;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
+    background: var(--bot-bubble-bg) !important;
+    border-radius: 18px 18px 18px 4px !important;
+    padding: 14px 18px !important;
+    margin-right: 40px !important;
+    border: 1px solid var(--bot-bubble-border) !important;
 }
 
 /* Message text */
 .chatbot .message p,
 .chatbot .message span,
 .chatbot .message div {
-    font-size: 15px !important;
-    line-height: 1.75 !important;
-    color: var(--ai-text) !important;
+    font-size: 14.5px !important;
+    line-height: 1.7 !important;
+    color: var(--text-primary) !important;
     font-family: var(--font-main) !important;
     word-wrap: break-word;
     overflow-wrap: break-word;
@@ -2471,40 +2342,38 @@ body {
 /* Myanmar text readability */
 .chatbot .message {
     font-family: var(--font-main) !important;
-    font-size: 15px !important;
+    font-size: 14.5px !important;
     line-height: 1.85 !important;
-    letter-spacing: 0.15px;
+    letter-spacing: 0.1px;
 }
 
 /* Code blocks inside messages */
 .chatbot .message pre {
-    background: rgba(0,0,0,0.4) !important;
-    border: 1px solid var(--ai-border2) !important;
-    border-radius: 12px !important;
-    padding: 14px 18px !important;
+    background: #0d0d12 !important;
+    border: 1px solid var(--border-subtle) !important;
+    border-radius: 10px !important;
+    padding: 14px 16px !important;
     font-size: 13px !important;
     line-height: 1.6 !important;
     font-family: var(--font-mono) !important;
     overflow-x: auto;
     white-space: pre-wrap;
     word-wrap: break-word;
-    backdrop-filter: blur(8px) !important;
 }
 
 /* Inline code */
 .chatbot .message code {
     font-family: var(--font-mono) !important;
     font-size: 13px !important;
-    background: rgba(138,180,248,0.1) !important;
-    padding: 2px 7px !important;
-    border-radius: 6px !important;
-    border: 1px solid rgba(138,180,248,0.15) !important;
-    color: #8ab4f8 !important;
+    background: rgba(108,99,255,0.12) !important;
+    padding: 2px 6px !important;
+    border-radius: 5px !important;
+    color: var(--accent-primary) !important;
 }
 
-/* Bold text in messages */
+/* Bold text */
 .chatbot .message strong {
-    color: #e8eaed !important;
+    color: var(--text-primary) !important;
     font-weight: 600 !important;
 }
 
@@ -2514,37 +2383,59 @@ body {
     padding-left: 4px !important;
 }
 
-/* ===== FLOATING INPUT BAR ===== */
-.ai-input-wrap {
-    background: var(--ai-glass2);
-    border: 1px solid var(--ai-border2);
-    border-radius: 22px;
-    backdrop-filter: blur(24px) !important;
-    -webkit-backdrop-filter: blur(24px) !important;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.06) !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    overflow: hidden;
+/* ===== QUICK START TEMPLATE CARDS ===== */
+.quick-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding: 6px 0;
+    max-width: 100%;
+}
+.quick-card {
+    background: var(--bg-glass);
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    padding: 12px 10px;
+    text-align: center;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    user-select: none;
+}
+.quick-card:hover {
+    background: var(--bg-glass-hover);
+    border-color: var(--accent-primary);
+    transform: translateY(-1px);
 }
-.ai-input-wrap:focus-within {
-    border-color: rgba(138,180,248,0.35) !important;
-    box-shadow: 0 8px 40px rgba(138,180,248,0.12), 0 0 0 3px rgba(138,180,248,0.08), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
+.quick-card:active {
+    transform: translateY(0);
+}
+.quick-card .qc-icon {
+    font-size: 20px;
+    display: block;
+    margin-bottom: 4px;
+}
+.quick-card .qc-label {
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.35;
+    display: block;
 }
 
+/* ===== INPUT AREA ===== */
 .input-container,
 .gr-input-container {
     background: transparent !important;
     border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
 }
 
 textarea {
-    font-size: 15.5px !important;
+    font-size: 15px !important;
     font-family: var(--font-main) !important;
-    color: var(--ai-text) !important;
+    color: var(--text-primary) !important;
     background: transparent !important;
     line-height: 1.5 !important;
-    padding: 14px 18px !important;
+    padding: 12px 16px !important;
     border: none !important;
     resize: none !important;
 }
@@ -2553,227 +2444,188 @@ textarea:focus {
     box-shadow: none !important;
 }
 textarea::placeholder {
-    color: var(--ai-text3) !important;
-    font-size: 15.5px !important;
+    color: var(--text-muted) !important;
+    font-size: 15px !important;
+}
+
+.crew-input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: 24px;
+    padding: 6px 8px 6px 16px;
+    transition: border-color 0.2s ease;
+}
+.crew-input-row:focus-within {
+    border-color: var(--accent-primary);
 }
 
 /* ===== BUTTONS ===== */
-.primary-btn, .btn-primary,
-button.primary-btn, button.btn-primary {
-    background: linear-gradient(135deg, #8ab4f8 0%, #c58af9 100%) !important;
+button.primary-btn,
+button.btn-primary,
+.gr-button-primary,
+button[variant="primary"] {
+    background: var(--accent-primary) !important;
     border: none !important;
-    border-radius: 16px !important;
-    font-weight: 700 !important;
+    border-radius: 20px !important;
+    font-weight: 600 !important;
     font-size: 14px !important;
-    padding: 10px 22px !important;
-    min-height: 46px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    color: #0d0d0f !important;
-    letter-spacing: 0.3px;
-    box-shadow: 0 4px 16px rgba(138,180,248,0.25) !important;
-}
-.primary-btn:hover, .btn-primary:hover {
-    transform: translateY(-3px) scale(1.02) !important;
-    box-shadow: 0 8px 28px rgba(138,180,248,0.4) !important;
-    filter: brightness(1.12) !important;
+    padding: 10px 20px !important;
+    min-height: 42px !important;
+    transition: all 0.2s ease !important;
+    color: #fff !important;
+    box-shadow: 0 2px 12px rgba(108,99,255,0.25) !important;
+}
+button.primary-btn:hover,
+button.btn-primary:hover,
+.gr-button-primary:hover {
+    background: #7b73ff !important;
+    box-shadow: 0 4px 20px rgba(108,99,255,0.35) !important;
+    transform: translateY(-1px) !important;
 }
-.primary-btn:active, .btn-primary:active {
-    transform: translateY(0) scale(0.98) !important;
-    box-shadow: 0 2px 8px rgba(138,180,248,0.2) !important;
+button.primary-btn:active,
+button.btn-primary:active {
+    transform: translateY(0) !important;
+    box-shadow: 0 2px 8px rgba(108,99,255,0.2) !important;
 }
 
 /* Secondary/clear button */
-button:not(.primary-btn):not(.btn-primary) {
-    background: var(--ai-glass) !important;
-    border: 1px solid var(--ai-border) !important;
-    border-radius: 16px !important;
-    color: var(--ai-text2) !important;
+.crew-clear-btn {
+    background: var(--bg-glass) !important;
+    border: 1px solid var(--border-subtle) !important;
+    border-radius: 20px !important;
+    color: var(--text-secondary) !important;
     font-weight: 500 !important;
-    transition: all 0.25s ease !important;
-    backdrop-filter: blur(8px) !important;
+    font-size: 13px !important;
+    padding: 8px 14px !important;
+    min-height: 42px !important;
+    transition: all 0.2s ease !important;
 }
-button:not(.primary-btn):not(.btn-primary):hover {
-    background: var(--ai-glass2) !important;
-    border-color: var(--ai-border2) !important;
-    color: var(--ai-text) !important;
-    transform: translateY(-1px) !important;
+.crew-clear-btn:hover {
+    background: var(--bg-glass-hover) !important;
+    border-color: var(--border-hover) !important;
+    color: var(--text-primary) !important;
 }
 
-/* ===== EXAMPLES - GLASS CARDS ===== */
+/* ===== EXAMPLES ROW ===== */
 .examples {
     background: transparent !important;
     border: none !important;
     border-radius: 0 !important;
     padding: 0 !important;
-    margin-top: 14px !important;
+    margin-top: 8px !important;
 }
 .examples .example {
-    background: var(--ai-glass) !important;
-    border: 1px solid var(--ai-border) !important;
-    border-radius: 14px !important;
-    color: var(--ai-text2) !important;
-    font-size: 13.5px !important;
-    padding: 10px 16px !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    background: var(--bg-glass) !important;
+    border: 1px solid var(--border-subtle) !important;
+    border-radius: 12px !important;
+    color: var(--text-secondary) !important;
+    font-size: 13px !important;
+    padding: 8px 14px !important;
+    transition: all 0.2s ease !important;
     cursor: pointer;
-    backdrop-filter: blur(8px) !important;
 }
 .examples .example:hover {
-    border-color: rgba(138,180,248,0.3) !important;
-    background: rgba(138,180,248,0.08) !important;
-    color: var(--ai-text) !important;
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+    border-color: var(--accent-primary) !important;
+    background: rgba(108,99,255,0.08) !important;
+    color: var(--text-primary) !important;
 }
 
-/* ===== ACCORDION - GLASS ===== */
+/* ===== ACCORDION ===== */
 .gr-accordion {
-    background: var(--ai-glass) !important;
-    border: 1px solid var(--ai-border) !important;
-    border-radius: 18px !important;
-    backdrop-filter: blur(12px) !important;
-    -webkit-backdrop-filter: blur(12px) !important;
+    background: var(--bg-glass) !important;
+    border: 1px solid var(--border-subtle) !important;
+    border-radius: 14px !important;
     overflow: hidden;
-    transition: all 0.3s ease;
 }
 .gr-accordion:hover {
-    border-color: var(--ai-border2) !important;
+    border-color: var(--border-hover) !important;
 }
 
 /* ===== DROPDOWN ===== */
 .gr-dropdown {
-    background: var(--ai-glass) !important;
-    border: 1px solid var(--ai-border) !important;
-    border-radius: 14px !important;
-    color: var(--ai-text) !important;
-    backdrop-filter: blur(8px) !important;
+    background: var(--bg-surface) !important;
+    border: 1px solid var(--border-subtle) !important;
+    border-radius: 12px !important;
+    color: var(--text-primary) !important;
 }
-.gr-dropdown:hover, .gr-dropdown:focus {
-    border-color: rgba(138,180,248,0.3) !important;
+.gr-dropdown:hover,
+.gr-dropdown:focus {
+    border-color: var(--accent-primary) !important;
 }
 
 /* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
-    width: 5px;
+    width: 4px;
 }
 ::-webkit-scrollbar-track {
     background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background: rgba(255,255,255,0.12);
+    background: rgba(255,255,255,0.10);
     border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255,255,255,0.22);
+    background: rgba(255,255,255,0.18);
 }
 
 /* ===== GLOBAL TEXT ===== */
 .gradio-container p, .gradio-container li {
-    color: var(--ai-text);
-    font-size: 14.5px;
-    line-height: 1.65;
+    color: var(--text-primary);
+    font-size: 14px;
+    line-height: 1.6;
 }
 .gradio-container h1, .gradio-container h2, .gradio-container h3 {
-    color: var(--ai-text);
+    color: var(--text-primary);
 }
 
-/* ===== FOOTER ===== */
+/* ===== FOOTER - ALWAYS HIDDEN ===== */
 footer { display: none !important; }
 
-/* ===== WELCOME FEATURE CARDS ===== */
-.welcome-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-    padding: 8px 0;
-    max-width: 680px;
-    margin: 0 auto;
-}
-.welcome-card {
-    background: var(--ai-glass);
-    border: 1px solid var(--ai-border);
-    border-radius: 16px;
-    padding: 14px 12px;
-    text-align: center;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: default;
-}
-.welcome-card:hover {
-    background: var(--ai-glass2);
-    border-color: rgba(138,180,248,0.25);
-    transform: translateY(-3px);
-    box-shadow: 0 8px 28px rgba(0,0,0,0.3);
-}
-.welcome-card .wc-icon {
-    font-size: 24px;
-    margin-bottom: 6px;
-    display: block;
-}
-.welcome-card .wc-title {
-    color: var(--ai-text);
-    font-size: 12.5px;
-    font-weight: 600;
-    display: block;
-}
-.welcome-card .wc-desc {
-    color: var(--ai-text3);
-    font-size: 11px;
-    margin-top: 3px;
-    display: block;
-}
-
 /* ===== TEMPLATE GALLERY GRID ===== */
 .tmpl-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
     gap: 8px;
     padding: 4px 0;
 }
 .tmpl-card {
-    background: var(--ai-glass);
-    border: 1px solid var(--ai-border);
-    border-radius: 14px;
-    padding: 10px 14px;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    transition: all 0.25s ease;
+    background: var(--bg-glass);
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    padding: 10px 12px;
+    transition: all 0.2s ease;
     cursor: default;
 }
 .tmpl-card:hover {
-    background: var(--ai-glass2);
-    border-color: rgba(138,180,248,0.2);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-}
-.tmpl-card b { color: #8ab4f8; font-size: 13px; }
-.tmpl-card span { color: var(--ai-text3); font-size: 11px; }
-
-/* ===== LOADING DOTS ===== */
-@keyframes dot-bounce {
-    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-    40% { transform: scale(1); opacity: 1; }
+    background: var(--bg-glass-hover);
+    border-color: var(--border-hover);
+    transform: translateY(-1px);
 }
+.tmpl-card b { color: var(--accent-primary); font-size: 13px; }
+.tmpl-card span { color: var(--text-muted); font-size: 11px; }
 
 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
-    .ai-title { font-size: 26px; }
-    .ai-logo-icon { width: 44px; height: 44px; font-size: 22px; }
-    .ai-stats { gap: 6px; }
-    .ai-stat-chip { padding: 5px 10px; font-size: 12px; }
-    .crew-pills { gap: 4px; }
-    .crew-pill { padding: 3px 8px; font-size: 11px; }
-    .chatbot .message.user { margin-left: 16px !important; }
+    .crew-title { font-size: 22px; }
+    .crew-logo { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
+    .chatbot .message.user { margin-left: 12px !important; }
     .chatbot .message.assistant,
-    .chatbot .message.bot { margin-right: 16px !important; }
-    .welcome-grid { grid-template-columns: repeat(2, 1fr); }
+    .chatbot .message.bot { margin-right: 12px !important; }
+    .quick-grid { grid-template-columns: repeat(2, 1fr); }
     .tmpl-grid { grid-template-columns: repeat(2, 1fr); }
+    .crew-stats { font-size: 12px; }
 }
 @media (max-width: 480px) {
-    .ai-title { font-size: 22px; }
-    .welcome-grid { grid-template-columns: 1fr 1fr; }
-    .ai-stats { flex-direction: column; align-items: center; }
+    .crew-title { font-size: 20px; }
+    .quick-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
+    .quick-card { padding: 10px 8px; }
+    .quick-card .qc-icon { font-size: 18px; }
+    .quick-card .qc-label { font-size: 11px; }
+    .crew-header { padding: 20px 12px 6px; }
+    .crew-stats { gap: 4px; font-size: 11px; }
 }
 
 /* ===== TEXT INPUT / DROPDOWN CONTAINERS ===== */
@@ -2782,155 +2634,137 @@ footer { display: none !important; }
     border: none !important;
 }
 .gr-box {
-    border-radius: 14px !important;
+    border-radius: 12px !important;
 }
 label {
-    color: var(--ai-text2) !important;
-    font-size: 13px !important;
+    color: var(--text-secondary) !important;
+    font-size: 12px !important;
 }
 """
 
 # ============================================================
-# GRADIO UI - PRO AI GLASSMORPHISM
+# GRADIO UI - CLEAN CHAT-STYLE LAYOUT
 # ============================================================
 
 with gr.Blocks(title="AI Coding Agent Crew") as demo:
-    # Ambient background orbs
-    gr.HTML("""
-    <div class="ambient-bg">
-        <div class="ambient-orb"></div>
-        <div class="ambient-orb"></div>
-        <div class="ambient-orb"></div>
-    </div>
-    """)
 
-    # Header with animated gradient
-    gr.HTML("""
-    <div class="ai-header">
-        <div class="ai-logo-row">
-            <div class="ai-logo-icon">✦</div>
-            <span class="ai-title">AI Coding Crew</span>
-        </div>
-        <div class="ai-subtitle">Autonomous AI Agent Crew for Hugging Face Spaces</div>
-    </div>
-    """)
-
-    # Stats chips
+    # ---- Simple header ----
     gr.HTML(f"""
-    <div class="ai-stats">
-        <span class="ai-stat-chip stat-blue"><span class="stat-val">{len(CREW)}</span> Agents</span>
-        <span class="ai-stat-chip stat-purple"><span class="stat-val">{len(TOOLS)}</span> Tools</span>
-        <span class="ai-stat-chip stat-pink"><span class="stat-val">{len(PROJECT_TEMPLATES)}</span> Templates</span>
-        <span class="ai-stat-chip stat-green"><span class="stat-val">Free</span> 100%</span>
+    <div class="crew-header">
+        <div class="crew-header-row">
+            <div class="crew-logo">&#x2726;</div>
+            <span class="crew-title">AI Coding Crew</span>
+        </div>
+        <div class="crew-subtitle">Autonomous AI Agent Crew for Hugging Face Spaces</div>
+        <div class="crew-stats">
+            <span class="stat-val">{len(CREW)}</span> Agents
+            <span class="stat-sep">|</span>
+            <span class="stat-val">{len(TOOLS)}</span> Tools
+            <span class="stat-sep">|</span>
+            <span class="stat-val">{len(PROJECT_TEMPLATES)}</span> Templates
+            <span class="stat-sep">|</span>
+            <span class="stat-free">Free</span>
+        </div>
     </div>
     """)
 
-    # Crew pills for all 20 agents
-    crew_row1 = '<div class="crew-pills">'
-    for key in ["planner","architect","coder","designer","reviewer","tester","optimizer","security","deployer","debugger"]:
-        c = CREW[key]
-        crew_row1 += f'<span class="crew-pill"><span class="pill-emoji">{c["emoji"]}</span><span class="pill-name">{c["name"]}</span></span>'
-    crew_row1 += '</div>'
-    gr.HTML(crew_row1)
-
-    crew_row2 = '<div class="crew-pills">'
-    for key in ["documenter","manager","devops","analyst","qa","integrator","refactorer","monitor","scraper","api_builder"]:
-        c = CREW[key]
-        crew_row2 += f'<span class="crew-pill"><span class="pill-emoji">{c["emoji"]}</span><span class="pill-name">{c["name"]}</span></span>'
-    crew_row2 += '</div>'
-    gr.HTML(crew_row2)
-
-    # Welcome feature cards
+    # ---- Quick-start template cards ----
     gr.HTML("""
-    <div class="welcome-grid">
-        <div class="welcome-card">
-            <span class="wc-icon">🚀</span>
-            <span class="wc-title">Instant Deploy</span>
-            <span class="wc-desc">One-click template deploy</span>
+    <div class="quick-grid">
+        <div class="quick-card" onclick="document.querySelector('textarea').value='chatbot ဆောက်ပေး'; document.querySelector('textarea').dispatchEvent(new Event('input',{bubbles:true}))">
+            <span class="qc-icon">&#x1F680;</span>
+            <span class="qc-label">chatbot ဆောက်ပေး</span>
         </div>
-        <div class="welcome-card">
-            <span class="wc-icon">🧠</span>
-            <span class="wc-title">20 AI Agents</span>
-            <span class="wc-desc">Autonomous crew system</span>
+        <div class="quick-card" onclick="document.querySelector('textarea').value='image generator လုပ်ပေး'; document.querySelector('textarea').dispatchEvent(new Event('input',{bubbles:true}))">
+            <span class="qc-icon">&#x1F3A8;</span>
+            <span class="qc-label">image generator လုပ်ပေး</span>
         </div>
-        <div class="welcome-card">
-            <span class="wc-icon">🔧</span>
-            <span class="wc-title">Auto-Fix</span>
-            <span class="wc-desc">Smart error repair</span>
+        <div class="quick-card" onclick="document.querySelector('textarea').value='text to speech app ဆောက်ပေး'; document.querySelector('textarea').dispatchEvent(new Event('input',{bubbles:true}))">
+            <span class="qc-icon">&#x1F3B5;</span>
+            <span class="qc-label">TTS app ဆောက်ပေး</span>
         </div>
-        <div class="welcome-card">
-            <span class="wc-icon">📦</span>
-            <span class="wc-title">18 Templates</span>
-            <span class="wc-desc">Ready-made projects</span>
+        <div class="quick-card" onclick="document.querySelector('textarea').value='password generator လုပ်ပေး'; document.querySelector('textarea').dispatchEvent(new Event('input',{bubbles:true}))">
+            <span class="qc-icon">&#x1F512;</span>
+            <span class="qc-label">password gen လုပ်ပေး</span>
         </div>
-        <div class="welcome-card">
-            <span class="wc-icon">🔒</span>
-            <span class="wc-title">Secure</span>
-            <span class="wc-desc">Code validation</span>
+        <div class="quick-card" onclick="document.querySelector('textarea').value='translator app ဆောက်ပေး'; document.querySelector('textarea').dispatchEvent(new Event('input',{bubbles:true}))">
+            <span class="qc-icon">&#x1F30D;</span>
+            <span class="qc-label">translator ဆောက်ပေး</span>
         </div>
-        <div class="welcome-card">
-            <span class="wc-icon">🌐</span>
-            <span class="wc-title">Free API</span>
-            <span class="wc-desc">Pollinations AI</span>
+        <div class="quick-card" onclick="document.querySelector('textarea').value='my spaces တွေပြပေး'; document.querySelector('textarea').dispatchEvent(new Event('input',{bubbles:true}))">
+            <span class="qc-icon">&#x1F4CA;</span>
+            <span class="qc-label">my spaces ပြပေး</span>
         </div>
     </div>
     """)
 
-    # Chat interface
-    chatbot = gr.Chatbot(height=500, placeholder="🎯 ဘာဆောက်ချင်ပါသလဲ? (What do you want to build?)")
+    # ---- Chatbot (main area) ----
+    chatbot = gr.Chatbot(
+        height=550,
+        placeholder="""
+        <div style='text-align:center;padding:60px 20px;color:#9aa0a6;font-family:Inter,Noto Sans Myanmar,sans-serif'>
+            <div style='font-size:40px;margin-bottom:12px'>&#x2726;</div>
+            <div style='font-size:20px;font-weight:600;color:#e8eaed;margin-bottom:6px'>ဘာဆောက်ချင်ပါသလဲ?</div>
+            <div style='font-size:14px;color:#5f6368'>What would you like to build today?</div>
+            <div style='font-size:13px;color:#5f6368;margin-top:10px'>App တစ်ခုဆောက်ချင်ရင် ပြောပါ / Just describe what you want</div>
+        </div>
+        """,
+    )
 
-    # Floating input bar
+    # ---- Input row ----
     with gr.Row(equal_height=True):
-        with gr.Column(scale=7, min_width=400):
+        with gr.Column(scale=8, min_width=300):
             msg_input = gr.Textbox(
-                placeholder="💬 ဘာလုပ်ချင်လဲ? ဘာဆောက်ချင်လဲ? (What would you like to build?)...",
+                placeholder="ဘာဆောက်ချင်လဲ? / What would you like to build?...",
                 show_label=False,
                 container=False,
                 lines=1,
                 max_lines=4,
             )
-        with gr.Column(scale=3, min_width=200):
+        with gr.Column(scale=4, min_width=180):
             with gr.Row(equal_height=True):
                 model_dropdown = gr.Dropdown(
                     choices=["openai", "mistral", "deepseek", "llama", "qwen"],
                     value="openai",
                     label="Model",
-                    min_width=100,
+                    min_width=90,
                     scale=2,
                 )
-                send_btn = gr.Button("✦ Send", variant="primary", min_width=80, scale=1)
-                clear_btn = gr.Button("🗑", min_width=50, scale=1)
+                send_btn = gr.Button("Send", variant="primary", min_width=70, scale=1)
+                clear_btn = gr.Button("Clear", elem_classes=["crew-clear-btn"], min_width=60, scale=1)
 
-    with gr.Row():
-        gr.Examples(
-            examples=[
-                "Build a video downloader website",
-                "AI image generator ဆောက်ပေး",
-                "Create a chatbot app",
-                "QR code generator လုပ်ပေး",
-                "အကောင့်ထဲက Space တွေ ပြပေး",
-            ],
-            inputs=msg_input,
-            label="Quick Start",
-        )
+    # ---- Quick examples row ----
+    gr.Examples(
+        examples=[
+            "chatbot ဆောက်ပေး",
+            "image generator လုပ်ပေး",
+            "text to speech app ဆောက်ပေး",
+            "password generator လုပ်ပေး",
+            "translator app ဆောက်ပေး",
+            "my spaces တွေပြပေး",
+        ],
+        inputs=msg_input,
+        label="Quick Start",
+    )
 
-    # Dashboard section - glass accordion
-    with gr.Accordion("📊 Dashboard & Tools", open=False):
+    # ---- Dashboard accordion ----
+    with gr.Accordion("Dashboard & Tools", open=False):
         with gr.Row():
-            refresh_btn = gr.Button("🔄 Refresh Spaces", variant="primary")
-            export_btn = gr.Button("📥 Export Chat")
+            refresh_btn = gr.Button("Refresh Spaces", variant="primary")
+            export_btn = gr.Button("Export Chat")
         spaces_output = gr.Textbox(label="Your Spaces", lines=8, interactive=False)
         stats_output = gr.Textbox(label="Session Stats", interactive=False)
         export_file = gr.File(label="Download")
 
-    # Templates gallery - glass cards
-    with gr.Accordion("📦 Template Gallery (18 Templates)", open=False):
+    # ---- Templates gallery accordion ----
+    with gr.Accordion("Template Gallery", open=False):
         template_html = '<div class="tmpl-grid">'
         for tkey, tmpl in PROJECT_TEMPLATES.items():
             template_html += f'<div class="tmpl-card"><b>{tmpl["name"]}</b><br><span>{tkey}</span></div>'
         template_html += '</div>'
         gr.HTML(template_html)
 
+    # ---- Event handlers ----
     msg_input.submit(run_agent, [msg_input, chatbot, model_dropdown], [chatbot]).then(fn=lambda: "", outputs=msg_input)
     send_btn.click(run_agent, [msg_input, chatbot, model_dropdown], [chatbot], api_name="send").then(fn=lambda: "", outputs=msg_input)
     clear_btn.click(fn=lambda: ([], ""), inputs=None, outputs=[chatbot, msg_input])