static/style.css

/* Import Google Fonts for better typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Root font styles - Applied to entire page */
* {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Background - Light Ukrainian sky with warm golden undertones */
.gradio-container {
  background: radial-gradient(1200px 600px at 20% 0%, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%);
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header - Transparent background, only text visible */
#app-header {
  position: sticky; top: 0; z-index: 10;
  background: transparent;
  backdrop-filter: none;
  padding: 18px 8px 10px 8px;
  border-bottom: none;
}
#app-header .app-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; 
  letter-spacing: -0.02em; 
  font-size: 40px;
  background: linear-gradient(120deg, #60a5fa 0%, #fbbf24 20%, #3b82f6 40%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#app-header .app-subtitle { 
  font-family: 'Source Sans Pro', sans-serif;
  color: #64748b; 
  margin-top: 4px; 
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* Chat card */
#chat-card .gr-chatbot {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%);
  border: 1px solid rgba(59,130,246,0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(245,158,11,0.15);
  backdrop-filter: blur(8px);
  border-radius: 18px;
}

/* Code blocks - Using JetBrains Mono for better readability */
#chat-card .prose pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'SF Mono', 'Consolas', 'DejaVu Sans Mono', monospace !important;
  border: 1px solid rgba(59,130,246,0.2);
  background: #f8fafc !important;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}
#chat-card .prose code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'SF Mono', 'Consolas', 'DejaVu Sans Mono', monospace !important;
  background: rgba(59,130,246,0.1);
  border-radius: 6px; 
  padding: 0.1rem 0.35rem;
  font-size: 13px;
  font-weight: 500;
}

/* Chat message text styling */
.gr-chatbot .message {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.gr-chatbot .message p {
  font-family: 'Source Sans Pro', sans-serif;
  margin-bottom: 0.75em;
}

/* ChatGPT-style input */
#chat-input-row {
  margin-top: 16px;
  padding: 0 8px;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.chat-input-box textarea {
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.9) !important;
  color: #334155 !important;
  padding: 12px 16px !important;
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  resize: none !important;
  transition: all 0.2s ease !important;
}

.chat-input-box textarea:focus {
  box-shadow: 0 4px 12px rgba(59,130,246,0.25) !important;
  background: rgba(255,255,255,1) !important;
}

.chat-input-box textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}

/* Hide container borders */
.chat-input-box {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 !important;
  width: 100% !important;
}

/* Input wrapper for send button positioning */

/* Send indicator - only show when stop button is hidden */
.chat-input-box::after {
  content: "↵";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 16px;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.chat-input-box:hover::after {
  opacity: 0.8;
}

/* Stop button styling */
.stop-btn-chat {
  flex-shrink: 0 !important;
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 100% !important;
}

.stop-btn-chat button {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  border-radius: 50% !important;
  padding: 6px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  width: 45px !important;
  height: 45px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.stop-btn-chat button:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2) !important;
}

/* Hide send icon when stop button is visible */
#chat-input-row:has(.stop-btn-chat:not([style*="display: none"])) .chat-input-box::after {
  display: none;
}

/* Right pane cards */
.side-card {
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%);
  padding: 8px 10px;
}

.footer-tip { 
  font-family: 'Source Sans Pro', sans-serif;
  color: #64748b; 
  font-size: 12.5px; 
  text-align: center; 
  margin-top: 6px; 
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Hidden buttons row - make invisible without using visibility */
#hidden-buttons {
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Force light theme - Disable dark mode switching */
@media (prefers-color-scheme: dark) {
  .gradio-container {
    background: radial-gradient(1200px 600px at 20% 0%, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%) !important;
    color-scheme: light !important;
  }
  
  /* Ensure all elements use light theme colors */
  .gradio-container * {
    color-scheme: light !important;
  }
  
  /* Override any dark mode styles that might be applied */
  .gradio-container .gr-chatbot {
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%) !important;
    color: #334155 !important;
  }
  
  .gradio-container .chat-input-box textarea {
    background: rgba(255,255,255,0.9) !important;
    color: #334155 !important;
  }
  
  .gradio-container #app-header .app-subtitle {
    color: #64748b !important;
  }
  
  /* Force light theme for all buttons and inputs */
  .gradio-container button {
    color-scheme: light !important;
  }
  
  .gradio-container input, 
  .gradio-container textarea {
    color-scheme: light !important;
  }
}