static/style.css

:root{--bg:#f4f7fb;--card:#fff;--accent:#27ae60;--muted:#6b7280}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);margin:0;color:#111}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(90deg,#ffffff,#fbfdfe);border-bottom:1px solid #eee}
.brand{font-weight:700}
.nav a{margin-left:12px;text-decoration:none;color:var(--muted)}
.container{max-width:1100px;margin:22px auto;padding:12px}
.chat-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
.chat-panel{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(16,24,40,0.06)}
.side-panel{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(16,24,40,0.06)}
.chat-box{height:360px;overflow:auto;border:1px solid #eef2f7;border-radius:8px;padding:12px;background:#fcfeff}
.user-msg{text-align:right;margin:8px 0;color:#0f172a}
.bot-msg{text-align:left;margin:8px 0;color:#064e3b}
.input-row{display:flex;gap:8px;margin-top:10px}
#user-input{flex:1;padding:10px;border:1px solid #e6eef6;border-radius:8px}
#order_id{width:100%;padding:8px;margin-top:8px;border-radius:8px;border:1px solid #e6eef6}
#send-btn{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}
.meta{display:flex;gap:14px;margin-top:12px;color:var(--muted)}
.negative-box{height:180px;overflow:auto;border:1px solid #fdecea;background:#fff5f5;padding:8px;border-radius:8px}
.negative-entry{border-bottom:1px dashed #ffdede;padding:8px;margin-bottom:6px}
.flashes .flash{padding:10px;border-radius:6px;margin-bottom:8px}
.flash.success{background:#e6ffed;color:#0b6a3a}
.flash.warning{background:#fff7e6;color:#7a4d00}
.flash.danger{background:#ffe6e6;color:#912d2d}
.footer{padding:12px;text-align:center;color:var(--muted);font-size:13px;margin-top:18px}
.home-grid{display:flex;gap:20px}
.home-left{flex:1}
.home-right{width:420px}
.btn{display:inline-block;padding:10px 14px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
@media(max-width:900px){.chat-grid{grid-template-columns:1fr}.home-grid{flex-direction:column}}