import gradio as gr

custom_css = """
body {
    background: linear-gradient(135deg, #020617 0%, #1e0b45 50%, #020617 100%);
}

.gradio-container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI", sans-serif;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 32px 32px 40px 32px !important;
    color: #f9fafb;
}

.gradio-container .block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Glass card shell ── */
.glass-card {
    background: rgba(15, 23, 42, 0.96) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9) !important;
    overflow: hidden;
}

/* ── Padding via ID selectors (beats Svelte scoped styles) ── */
#input-card,
#result-card,
#hiw-intro-card,
#hiw-step1-card,
#hiw-step2-card,
#hiw-step3-card,
#about-intro-card,
#about-thesis-card,
#fb-intro-card,
#fb-form-card,
#fb-faq-card {
    padding: 20px 22px !important;
    gap: 10px !important;
}

/* ── Inner Gradio form wrapper (Svelte renders this inside every Group) ── */
#input-card > .form,
#result-card > .form,
#hiw-intro-card > .form,
#hiw-step1-card > .form,
#hiw-step2-card > .form,
#hiw-step3-card > .form,
#about-intro-card > .form,
#about-thesis-card > .form,
#fb-intro-card > .form,
#fb-form-card > .form,
#fb-faq-card > .form {
    padding: 20px 22px !important;
    gap: 10px !important;
}

/* ── Hero section ── */
.hero-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #e5e7eb;
    margin-bottom: 8px;
}
.hero-subtitle {
    font-size: 14px;
    max-width: 640px;
    opacity: 0.9;
    color: #cbd5f5;
}

/* ── Confidence bar ── */
.conf-bar-bg {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
}
.conf-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f97316, #fb923c);
}

/* ── Label badges ── */
.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-fake { background: #f97316; color: #111827; }
.badge-real { background: #22c55e; color: #022c22; }

/* ── Textarea ── */
#news-textbox textarea,
#fb-textbox textarea,
#fb-email-textbox textarea,
#fb-email-textbox input {
    background: #020617 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #f9fafb !important;
    font-size: 13px !important;
    padding: 16px 18px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

#news-textbox textarea::placeholder,
#fb-textbox textarea::placeholder,
#fb-email-textbox input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* ── Labels ── */
.gradio-container label {
    margin-bottom: 6px !important;
}

/* ── Prose / markdown text color inside dark cards ── */
.glass-card .prose,
.glass-card .markdown-body,
.glass-card p,
.glass-card li {
    color: #f9fafb !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .two-col {
        flex-direction: column !important;
    }
}
"""


def header():
    return gr.HTML(
        """
        <div style="max-width:1120px;margin:0 auto;">
          <header style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
            <div style="display:flex;align-items:center;gap:10px;">
              <div style="width:32px;height:32px;border-radius:999px;
                          background:radial-gradient(circle at 30% 30%, #a5b4fc, #6366f1);
                          display:flex;align-items:center;justify-content:center;
                          color:#020617;font-weight:700;font-size:16px;">
                C
              </div>
              <div>
                <div style="font-weight:600;font-size:14px;letter-spacing:0.08em;
                            text-transform:uppercase;color:#e5e7eb;">
                  CMD&#8209;BERT
                </div>
                <div style="font-size:11px;color:#9ca3af;">
                  Cebuano Misinformation Detector
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:center;gap:8px;font-size:13px;color:#e5e7eb;opacity:0.9;">
              <span>About CMD&#8209;BERT</span>
              <div style="width:24px;height:24px;border-radius:999px;
                          background:rgba(148,163,184,0.35);"></div>
            </div>
          </header>
        </div>
        """
    )