static/style.css

:root{
  --bg:#e5ddd5;
  --me:#dcf8c6;
  --bot:#ffffff;
  --top:#075e54;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: var(--bg); padding:0; margin:0;}
.topbar{background:var(--top); color:white; padding:10px 16px; display:flex; align-items:center; gap:12px;}
.topbar .avatar{width:36px; height:36px; border-radius:50%; background:#fff;}
.topbar .title{font-weight:600;}
.gradio-container { padding: 0; margin: 0; }
#chatbox { height: 60vh; overflow:auto; background: transparent; padding:10px;}
.message { margin:6px 0; display:flex; align-items:flex-end; }
.message .bubble { max-width:75%; padding:10px 12px; border-radius:12px; }
.message.me { justify-content:flex-end; }
.message.me .bubble { background: var(--me); border-bottom-right-radius:2px; }
.message.bot { justify-content:flex-start; }
.message.bot .bubble { background: var(--bot); border-bottom-left-radius:2px; }
.message .meta { font-size:10px; color:#666; margin-top:4px;}
pre code { background:#f6f8fa; display:block; padding:10px; border-radius:6px; overflow:auto;}
.copy-btn { display:inline-block; margin-left:8px; padding:4px 8px; background:#075e54; color:#fff; border-radius:4px; cursor:pointer; font-size:12px;}