htmlTemplates.py

css = """
<style>
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Root & page ── */
:root {
    --bg:          #0d0f14;
    --surface:     #151820;
    --surface-2:   #1d2130;
    --border:      #2a2f42;
    --accent:      #5b7fff;
    --accent-glow: rgba(91,127,255,0.25);
    --user-bg:     #1a2340;
    --bot-bg:      #161b2a;
    --text:        #e8ecf4;
    --muted:       #6b7492;
    --success:     #3ecf8e;
    --radius:      14px;
}

html, body, [data-testid="stAppViewContainer"] {
    background-color: var(--bg) !important;
    font-family: 'Sora', sans-serif;
    color: var(--text);
}

[data-testid="stSidebar"] {
    background-color: var(--surface) !important;
    border-right: 1px solid var(--border);
}

/* ── App header ── */
.app-header {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.app-header .app-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 16px var(--accent-glow));
}
.app-header h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.35rem;
}
.app-header p {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    margin: 0;
}

/* ── Chat bubbles ── */
.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-message.user {
    background: var(--user-bg);
    border-color: rgba(91,127,255,0.3);
    flex-direction: row-reverse;
}
.chat-message.bot {
    background: var(--bot-bg);
}

/* Avatar */
.chat-message .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.chat-message.user .avatar {
    background: linear-gradient(135deg, #3a5bd9, var(--accent));
    border-color: var(--accent);
}
.chat-message.bot .avatar {
    background: linear-gradient(135deg, #1f2a45, #2e3d6b);
}

/* Message text */
.chat-message .message {
    flex: 1;
    line-height: 1.65;
    font-size: 0.92rem;
    color: var(--text);
}
.chat-message.user .message {
    text-align: right;
}

/* Label */
.chat-message .label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

/* ── Empty state ── */
.empty-state {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--muted);
}
.empty-state span { font-size: 3rem; display: block; margin-bottom: 1rem; }
.empty-state p { font-size: 0.95rem; font-weight: 300; }

/* ── Streamlit overrides ── */
[data-testid="stChatInput"] textarea {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    font-family: 'Sora', sans-serif !important;
}
[data-testid="stChatInput"] textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.stButton > button {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.stButton > button:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 12px var(--accent-glow) !important;
    color: #fff !important;
}

[data-testid="stFileUploader"] {
    background: var(--surface-2) !important;
    border: 1px dashed var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 1rem !important;
}

.stAlert {
    border-radius: var(--radius) !important;
}

/* Sidebar text */
[data-testid="stSidebar"] h2,
[data-testid="stSidebar"] label,
[data-testid="stSidebar"] small {
    color: var(--muted) !important;
}
</style>
"""

# ── Message templates ────────────────────────────────────────────────────────

user_template = """
<div class="chat-message user">
    <div class="avatar">🧑</div>
    <div>
        <div class="label">You</div>
        <div class="message">{{MSG}}</div>
    </div>
</div>
"""

bot_template = """
<div class="chat-message bot">
    <div class="avatar">🤖</div>
    <div>
        <div class="label">Assistant</div>
        <div class="message">{{MSG}}</div>
    </div>
</div>
"""