:root{
  --bg:#0b1220;
  --card:#1b2433;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --accent:#38bdf8;
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#eab308;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* Stadium background overlay */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(900px 400px at 80% 0%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(180deg,#0a1220 0%,#0b1424 70%,#0a1220 100%);
  opacity:.9;
}

.container{
  width:100%;
  max-width:700px;
  margin:0 auto;
  padding:24px;
  text-align:center;
}

.brand{
  margin:0;
  font-size:clamp(32px,5vw,44px);
  font-weight:800;
}
.brand .accent{ color:var(--accent); }

.tagline{
  margin:10px 0 28px;
  color:var(--muted);
  font-size:clamp(14px,2.5vw,17px);
}

#chat{
  background:var(--card);
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  text-align:left;
}

.messages{
  max-height:50vh;
  overflow:auto;
  display:grid;
  gap:12px;
  margin-bottom:14px;
}

.msg{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  padding:10px 12px;
}
.msg .role{ color:var(--muted); font-weight:700; text-transform:uppercase; font-size:12px; }
.msg .content{ word-wrap:break-word; }

/* chips & decision */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.chip{ background:rgba(255,255,255,.1); border-radius:999px; padding:4px 10px; font-size:12px; }
.decision{ display:inline-block; font-weight:900; padding:4px 12px; border-radius:999px; margin-bottom:4px; }
.decision.over{ background:rgba(34,197,94,.25); color:var(--good); }
.decision.under{ background:rgba(239,68,68,.25); color:var(--bad); }
.decision.pass{ background:rgba(234,179,8,.25); color:var(--warn); }
.explain{ margin:6px 0 0; }

/* input and button */
.composer{ display:grid; grid-template-columns:1fr auto; gap:12px; }
#input{
  padding:14px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:#fff;
  color:#000;
}
#input::placeholder{ color:#555; }
#send{
  padding:14px 18px;
  border-radius:12px;
  border:none;
  background:var(--accent);
  color:#000;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
}
#send:hover{ background:#0ea5e9; }

.refresh{
  margin-top:8px; padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12);
  color:var(--text);
  cursor:pointer;
}

.foot{ margin-top:20px; color:var(--muted); font-size:13px; }

/* mobile tweaks */
@media (max-width:640px){
  .msg{ grid-template-columns:60px 1fr; }
  #input{ font-size:15px; }
  #send{ padding:12px 14px; font-size:15px; }
}