ui/theme.py

"""Dark visual system: design tokens, the CDN `head` (fonts + Chart.js + flip/radar JS),
and the global CSS. Single source of visual truth — backend integration never touches this.

Why JS lives in `head` and not in `gr.HTML`: on Gradio 6, raw <script> inside an HTML
component's value is injected via innerHTML and does NOT execute. The supported path is to
load libraries/handlers in the document head. So: Chart.js + fonts load here, flip is a
document-level click delegate, and the radar is drawn by a global function (`__omcDrawRadar`)
that reads its data from the canvas's `data-*` attributes (server-rendered, fully declarative).
"""
from __future__ import annotations

import gradio as gr

# Design tokens — keep in sync with SPEC_ui_shell.md.
BG = "#0F1218"
PANEL = "#181C24"
BORDER = "#2A2F3A"
TXT = "#E8EAED"
TXT2 = "#9AA0A8"
TXT3 = "#5C636D"
TEAL = "#34D3B0"
RADAR_FILL = "rgba(52,211,176,0.18)"


def base_theme() -> gr.themes.Base:
    """Dark Gradio base so default chrome never flashes light surfaces."""
    return gr.themes.Base(
        primary_hue=gr.themes.colors.teal,
        secondary_hue=gr.themes.colors.teal,
        neutral_hue=gr.themes.colors.slate,
        font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "sans-serif"],
        font_mono=[gr.themes.GoogleFont("Inter"), "monospace"],
    ).set(
        body_background_fill=BG,
        body_background_fill_dark=BG,
        background_fill_primary=PANEL,
        background_fill_secondary=PANEL,
        body_text_color=TXT,
        border_color_primary=BORDER,
        block_background_fill=PANEL,
        block_border_color=BORDER,
        input_background_fill=PANEL,
    )


HEAD = f"""
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Saira:wght@600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
  // Click-to-flip via event delegation so it works for server-rendered/late content.
  document.addEventListener('click', function (e) {{
    var card = e.target.closest('.flip-card');
    if (card) {{ card.classList.toggle('flipped'); }}
  }});

  // Draw the radar from data-* attributes on the canvas. Idempotent (destroys prior chart).
  window.__omcChart = null;
  window.__omcDrawRadar = function () {{
    var el = document.getElementById('omc-radar');
    if (!el || typeof Chart === 'undefined') return;
    var scores = (el.dataset.scores || '').split(',').map(Number);
    var labels = (el.dataset.labels || '').split('|');
    if (!scores.length || !scores[0] && scores.length === 1) return;
    if (window.__omcChart) {{ window.__omcChart.destroy(); window.__omcChart = null; }}
    // Explicitly size the canvas to its CSS container before Chart.js measures it.
    // This prevents a 0x0 canvas when the parent was flex:1 with no room (the original bug).
    var wrap = el.parentElement;
    if (wrap && wrap.offsetHeight > 0) {{
      el.width = wrap.offsetWidth || 320;
      el.height = wrap.offsetHeight || 175;
    }} else {{
      el.width = el.width || 320;
      el.height = el.height || 175;
    }}
    window.__omcChart = new Chart(el, {{
      type: 'radar',
      data: {{ labels: labels, datasets: [{{
        data: scores,
        backgroundColor: '{RADAR_FILL}',
        borderColor: '{TEAL}',
        borderWidth: 2,
        pointBackgroundColor: '{TEAL}',
        pointBorderColor: '{TEAL}',
        pointRadius: 3,
      }}] }},
      options: {{
        responsive: true, maintainAspectRatio: false,
        scales: {{ r: {{
          suggestedMin: 0, suggestedMax: 10, beginAtZero: true,
          ticks: {{ display: false, stepSize: 2 }},
          grid: {{ color: '{BORDER}' }},
          angleLines: {{ color: '{BORDER}' }},
          pointLabels: {{ color: '{TXT2}', font: {{ size: 11, family: 'Inter' }} }},
        }} }},
        plugins: {{ legend: {{ display: false }}, tooltip: {{ enabled: false }} }},
        animation: {{ duration: 500 }},
      }},
    }});
  }};
</script>
"""

# JS handed to `.then(js=...)` after the result screen is shown, so the canvas exists & is sized.
DRAW_RADAR_JS = "() => { setTimeout(function(){ window.__omcDrawRadar && window.__omcDrawRadar(); }, 70); }"


CSS = f"""
/* Center the app column on the page (horizontally) with comfortable top spacing. Gradio 6 nests
   content a few levels deep, so center every block-level wrapper inside the container, not just the
   container itself — otherwise the column can sit pinned to the left. */
.gradio-container {{ background: {BG} !important; max-width: 720px !important;
  margin: 0 auto !important; padding: 32px 20px 48px !important; }}
.gradio-container .main, .gradio-container .wrap, .gradio-container .contain {{
  margin-left: auto !important; margin-right: auto !important; }}
.gradio-container, .gradio-container * {{ font-family: 'Inter', sans-serif; }}
body {{ background: {BG}; }}
footer {{ display: none !important; }}

#screen-intake, #screen-processing, #screen-result {{ border: none; background: transparent; }}

/* Headings / display type */
.omc-display {{ font-family: 'Saira', sans-serif !important; font-weight: 700; color: {TXT}; }}
#omc-title {{ font-family: 'Saira', sans-serif; font-weight: 700; font-size: 30px;
  color: {TXT}; margin: 8px 0 6px; letter-spacing: .2px; }}
#omc-subtitle {{ color: {TXT2}; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }}

/* Export-guide helper (provider buttons + revealed steps) */
.omc-guide-prompt {{ color: {TXT2}; font-size: 13px; margin: 10px 0 6px; }}
#omc-prov-row {{ gap: 8px; }}
.omc-prov-btn {{ font-family: 'Saira', sans-serif !important; font-weight: 600;
  background: {PANEL} !important; color: {TXT} !important;
  border: 1px solid {BORDER} !important; border-radius: 8px; }}
.omc-prov-btn:hover {{ border-color: {TEAL} !important; color: {TEAL} !important; }}
#omc-guide-panel .omc-guide {{ background: #12151C; border: 1px solid {BORDER}; border-radius: 10px;
  padding: 12px 14px; margin: 8px 0 4px; color: {TXT2}; font-size: 13px; line-height: 1.65; }}
#omc-guide-panel .omc-guide h4 {{ font-family: 'Saira', sans-serif; color: {TXT}; font-size: 14px; margin: 0 0 6px; }}
#omc-guide-panel .omc-guide ol {{ margin: 0; padding-left: 18px; }}
#omc-guide-panel .omc-guide b {{ color: {TXT}; }}
#omc-guide-panel .omc-guide code {{ background: {BG}; color: {TEAL}; padding: 1px 5px; border-radius: 4px; font-size: 12px; }}
#omc-guide-panel .omc-guide .note {{ color: #E8B84B; opacity: .85; font-size: 11px; margin-top: 8px; }}

/* Intake controls — match dark by color only, no heavy restyling */
#omc-file, #omc-name {{ background: {PANEL}; border: 1px solid {BORDER}; border-radius: 10px; }}
#omc-file *, #omc-name * {{ color: {TXT}; }}
#omc-file .wrap, #omc-file .file-preview {{ color: {TXT2}; }}
.gradio-container input[type=text], .gradio-container textarea {{
  background: {PANEL} !important; color: {TXT} !important; border-color: {BORDER} !important; }}

#omc-analyze {{ background: {TEAL} !important; color: {BG} !important;
  font-family: 'Saira', sans-serif !important; font-weight: 600; border: none; border-radius: 10px; }}
#omc-analyze:disabled, #omc-analyze[disabled] {{ background: #1d3a35 !important; color: {TXT3} !important; cursor: not-allowed; }}

/* Processing screen */
#omc-proclog {{ min-height: 220px; }}
.omc-proc-wrap {{ padding: 8px 2px; }}
.omc-fact {{ display: flex; align-items: center; gap: 10px; color: {TXT}; font-size: 15px;
  padding: 9px 0; border-bottom: 1px solid {BORDER}; opacity: 0; animation: omcFadeIn .45s ease forwards; }}
.omc-fact .dot {{ width: 7px; height: 7px; border-radius: 50%; background: {TEAL}; flex: none; }}
.omc-fact .num {{ font-family: 'Saira', sans-serif; font-weight: 600; color: {TEAL}; }}
.omc-fact.muted {{ color: {TXT2}; }}
.omc-error {{ display: flex; align-items: flex-start; gap: 10px; color: #F8B4B4; font-size: 14px;
  line-height: 1.5; padding: 12px 14px; margin: 10px 0; background: rgba(220,80,80,.10);
  border: 1px solid rgba(220,80,80,.45); border-radius: 10px; }}
.omc-error .dot {{ width: 7px; height: 7px; border-radius: 50%; background: #E25858; flex: none; margin-top: 6px; }}
.omc-error b {{ color: #F3C0C0; font-family: 'Saira', sans-serif; }}
.omc-langbar {{ height: 8px; border-radius: 4px; overflow: hidden; display: flex; width: 100%; margin-top: 6px; }}
.omc-langbar .en {{ background: {TEAL}; }}
.omc-langbar .other {{ background: {BORDER}; }}
.omc-lang-legend {{ color: {TXT2}; font-size: 12px; margin-top: 6px; }}
@keyframes omcFadeIn {{ from {{ opacity: 0; transform: translateY(4px); }} to {{ opacity: 1; transform: none; }} }}

/* Live scoring progress bar (real, ticked per completed model call) */
.omc-progress {{ margin: 16px 0 4px; }}
.omc-progress-track {{ height: 10px; background: #12151C; border: 1px solid {BORDER};
  border-radius: 6px; overflow: hidden; }}
.omc-progress-fill {{ height: 100%; background: linear-gradient(90deg, {TEAL}, #2BB89A);
  border-radius: 6px; transition: width .35s ease; box-shadow: 0 0 12px rgba(52,211,176,.45); }}
.omc-progress-fill.indet {{ width: 35% !important; animation: omcIndet 1.1s ease-in-out infinite; }}
.omc-progress-label {{ display: flex; justify-content: space-between; align-items: baseline;
  color: {TXT2}; font-size: 12px; margin-top: 7px; }}
.omc-progress-label .num {{ font-family: 'Saira', sans-serif; font-weight: 600; color: {TEAL}; font-size: 14px; }}
.omc-progress-label .pct {{ font-family: 'Saira', sans-serif; font-weight: 700; color: {TXT}; }}
@keyframes omcIndet {{ 0% {{ margin-left: -35%; }} 100% {{ margin-left: 100%; }} }}

/* Flip card — height increased from 480px to 560px so the radar (175px fixed) always fits
   alongside the avatar/name/tier/OVR/stars/notes even when the amber placeholder text and
   single-conversation scope note are both present. Both faces are position:absolute;inset:0
   so they need a definite (not just min-) height on their parent to anchor bottom:0. */
.flip-card {{ perspective: 1200px; cursor: pointer; width: 100%; max-width: 380px; height: 560px;
  margin: 0 auto; }}
.flip-card-inner {{ position: relative; width: 100%; height: 100%; transition: transform .6s;
  transform-style: preserve-3d; }}
.flip-card.flipped .flip-card-inner {{ transform: rotateY(180deg); }}
.flip-card-face {{ position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: {PANEL}; border: 1px solid {BORDER}; border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.35); }}
.flip-card-back {{ transform: rotateY(180deg); }}
.flip-hint {{ position: absolute; bottom: 10px; right: 16px; color: {TXT3}; font-size: 11px; }}

.omc-avatar {{ width: 64px; height: 64px; border-radius: 50%; background: {BG}; border: 1px solid {BORDER};
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }}
.omc-name {{ font-family: 'Saira', sans-serif; font-weight: 600; font-size: 20px; color: {TXT}; text-align: center; }}
.omc-tier {{ font-family: 'Saira', sans-serif; font-weight: 700; font-size: 13px; text-align: center;
  display: inline-block; padding: 2px 12px; border-radius: 999px; margin: 8px auto 4px; }}
.omc-tier-wrap {{ text-align: center; }}
.omc-ovr {{ font-family: 'Saira', sans-serif; font-weight: 700; font-size: 46px; color: {TXT}; text-align: center;
  line-height: 1; margin: 6px 0 2px; }}
.omc-ovr .slash {{ font-size: 18px; color: {TXT2}; font-weight: 600; }}
.omc-stars {{ text-align: center; font-size: 22px; letter-spacing: 2px; margin: 4px 0 8px; }}
.omc-star {{ position: relative; display: inline-block; color: {TXT3}; }}
.omc-star .fill {{ position: absolute; left: 0; top: 0; overflow: hidden; color: #E8B84B; white-space: nowrap; }}
/* Fixed height so Chart.js (maintainAspectRatio:false) always has a definite parent size.
   flex:1 was the bug: when placeholder + scope notes overflow the 480px card, flex:1 collapses
   to 0 and the canvas renders invisible / below the card. */
.omc-radar-wrap {{ height: 175px; min-height: 175px; position: relative; margin-top: 4px; flex: none; }}
#omc-radar {{ width: 100% !important; height: 100% !important; display: block; }}

/* Card back */
.omc-back-title {{ font-family: 'Saira', sans-serif; font-weight: 600; color: {TXT}; font-size: 15px; margin-bottom: 10px; }}
.omc-bar-row {{ margin: 7px 0; }}
.omc-bar-head {{ display: flex; justify-content: space-between; font-size: 12px; color: {TXT2}; margin-bottom: 3px; }}
.omc-bar-head .v {{ font-family: 'Saira', sans-serif; color: {TXT}; }}
.omc-bar {{ height: 7px; background: {BG}; border-radius: 4px; overflow: hidden; }}
.omc-bar .fill {{ height: 100%; background: {TEAL}; border-radius: 4px; }}
.omc-crit {{ font-size: 12px; color: {TXT2}; margin: 12px 0 4px; line-height: 1.6; }}
.omc-crit b {{ color: {TXT}; font-family: 'Saira', sans-serif; font-weight: 600; }}
.omc-conf {{ font-size: 11px; color: {TXT3}; margin-top: 6px; }}
.omc-improve {{ font-size: 12px; color: {TEAL}; margin-top: auto; padding-top: 10px; line-height: 1.5; }}

/* Honesty tag — amber when scores are a heuristic placeholder, teal when real ML */
.omc-placeholder {{ text-align: center; font-size: 10px; color: #E8B84B; opacity: .85;
  letter-spacing: .3px; margin: 4px 0; }}
.omc-placeholder-sm {{ font-size: 10px; color: #E8B84B; opacity: .85; margin-bottom: 5px; }}
.omc-real {{ text-align: center; font-size: 10px; color: {TEAL}; opacity: .85;
  letter-spacing: .3px; margin: 4px 0; }}
.omc-real-sm {{ font-size: 10px; color: {TEAL}; opacity: .85; margin-bottom: 5px; }}
/* Paste tab hint */
.omc-paste-hint {{ color: {TXT2}; font-size: 12px; line-height: 1.55; margin: 4px 0 8px;
  padding: 8px 10px; background: #12151C; border: 1px solid {BORDER}; border-radius: 8px; }}
.omc-paste-hint b {{ color: {TXT}; }}
#omc-paste-btn {{ background: {TEAL} !important; color: {BG} !important;
  font-family: 'Saira', sans-serif !important; font-weight: 600; border: none; border-radius: 10px; }}
/* Single-conversation (paste) scope disclaimer */
.omc-scope {{ background: #12151C; border: 1px solid {BORDER}; border-radius: 8px; padding: 7px 10px;
  margin: 6px 0; text-align: center; }}
.omc-scope b {{ display: block; font-family: 'Saira', sans-serif; color: #E8B84B; font-size: 11px;
  letter-spacing: .3px; margin-bottom: 2px; }}
.omc-scope span {{ color: {TXT2}; font-size: 11px; line-height: 1.45; }}

/* Evidence accordions */
.omc-evidence {{ color: {TXT2}; font-size: 13px; line-height: 1.6; }}
.omc-evidence .q {{ display: block; color: {TXT}; border-left: 2px solid {TEAL}; padding: 2px 0 2px 10px; margin: 6px 0; }}
.omc-evidence .tip {{ color: {TEAL}; margin-top: 8px; }}
.omc-evidence .score {{ font-family: 'Saira', sans-serif; color: {TXT}; }}

@media (prefers-reduced-motion: reduce) {{
  .flip-card-inner {{ transition: none; }}
  .omc-fact {{ animation: none; opacity: 1; }}
  #omc-radar {{ }}
}}
"""