style.css

:root { --emma-teal: #1f9d8f; --emma-teal-dark: #16857a; }

/* Hide Gradio's default footer ("Use via API · Built with Gradio · Settings"). */
footer { display: none !important; }

/* NOTE: we deliberately do NOT use viewport units (vh/dvh) for height. On the
   huggingface.co Space page the app runs in an auto-resizing iframe whose
   height tracks the content; vh-based heights create a feedback loop that
   blows the iframe up (and makes the outer page scroll forever). Instead the
   Chatbot gets a fixed pixel height (via its `height=` prop) and scrolls its
   message list internally, so the total app height is constant. */
.gradio-container { background: #eef5f4 !important; max-width: 100% !important;
    width: 100% !important; padding: 10px 28px !important; }
#emma-chat .bubble-wrap { overflow-y: auto !important; }

/* Header card */
#emma-header {
    background: #ffffff; border-radius: 18px; padding: 16px 22px;
    box-shadow: 0 4px 18px rgba(31,157,143,.08); margin-bottom: 14px;
}
#emma-header h1 { margin: 0; font-size: 22px; font-weight: 800; color: #1d3a37; }
#emma-header p { margin: 4px 0 0; font-size: 13px; color: #6b8783; }
#emma-header .pill {
    display: inline-block; background: #e3f2ef; color: var(--emma-teal-dark);
    font-weight: 700; font-size: 12px; padding: 2px 10px; border-radius: 20px; margin-left: 6px;
}

/* Chat area */
#emma-chat { background: transparent !important; border: none !important; box-shadow: none !important; }

/* User (right) bubbles -> teal */
#emma-chat .message-row.user-row .message,
#emma-chat .user .message,
#emma-chat div[data-testid="user"] {
    background: var(--emma-teal) !important; color: #fff !important;
    border-radius: 18px 18px 4px 18px !important; border: none !important;
}
/* Assistant (left) bubbles -> white card */
#emma-chat .message-row.bot-row .message,
#emma-chat .bot .message,
#emma-chat div[data-testid="bot"] {
    background: #ffffff !important; color: #1d3a37 !important;
    border-radius: 18px 18px 18px 4px !important;
    box-shadow: 0 3px 12px rgba(31,157,143,.07) !important; border: none !important;
}

/* Footer stats */
#emma-stats { color: #6b8783; font-size: 12px; text-align: center; min-height: 18px; margin-top: 2px; }
#emma-foot { color: #8aa3a0; font-size: 14px; text-align: center; margin-top: 6px; }

/* Send button teal & round */
#emma-send { background: var(--emma-teal) !important; color: #fff !important; border-radius: 50% !important;
    min-width: 46px !important; max-width: 46px !important; height: 46px !important; font-size: 18px !important; }
#emma-send:hover { background: var(--emma-teal-dark) !important; }
#emma-input textarea { border-radius: 24px !important; border: 1.5px solid #cfe4e0 !important; }