# =========================
# CSS & UI
# =========================
custom_css = """
body, .gradio-container { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
.app-header { text-align: center; max-width: 800px; margin: 0 auto 8px !important; }
.gradio-container { padding: 4px 0 !important; max-width: 1200px !important; margin: 0 auto !important; }
.gradio-container [data-testid="tabs"], .gradio-container .tabs { margin-top: 0 !important; }
.gradio-container [data-testid="tabitem"], .gradio-container .tabitem { padding-top: 4px !important; }
.gradio-container .wrap { gap: 0 !important; }
.quick-links { text-align: center; padding: 8px 0; border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px auto; max-width: 800px; }
.quick-links a { margin: 0 12px; font-size: 14px; font-weight: 600; color: #3b82f6; text-decoration: none; }
.quick-links a:hover { text-decoration: underline; }
.prompt-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.prompt-grid button { height: 40px !important; padding: 0 12px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.2px; }
#image_preview_vl, #image_preview_doc { height: 400px !important; overflow: auto; }
#image_preview_vl img, #image_preview_doc img, #vis_image_doc img { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; }
#md_preview_vl, #md_preview_doc { max-height: 540px; min-height: 180px; overflow: auto; scrollbar-gutter: stable both-edges; }
#md_preview_vl .prose, #md_preview_doc .prose { line-height: 1.7 !important; }
#md_preview_vl .prose img, #md_preview_doc .prose img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.notice { margin: 8px auto 0; max-width: 800px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; font-size: 14px; line-height: 1.6; }
.notice strong { font-weight: 700; }
.notice a { color: #3b82f6; text-decoration: none; }
.notice a:hover { text-decoration: underline; }

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body, .gradio-container {
    background-color: #0f1117 !important;
    color: #f5f5f5 !important;
  }

  .notice {
    background: #1e293b !important;
    color: #f5f5f5 !important;
    border: 1px solid #334155 !important;
  }

  .notice a {
    color: #60a5fa !important;
  }

  .quick-links {
    border-color: #334155 !important;
  }

  .quick-links a {
    color: #93c5fd !important;
  }
}

/* Hide empty Gradio auto-scroll/anchor button or padding container near Markdown blocks */
button.svelte-vuh1yp, 
div.svelte-vuh1yp:has(button),
div#component-3 > div.wrap.center.full,
div[id^="component-"][class*="hide-container"] .wrap.center.full {
    display: none !important;
}

/* Prevent extra padding on Markdown containers */
div[class*="block"].hide-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
}

"""