:root{
  --bg:#14171A;
  --bg2:#1B1F23;
  --paper:#1E2226;
  --grid-line:rgba(139,168,184,.07);
  --copper:#C97C3D;
  --copper-l:#E0A363;
  --copper-d:#8F551F;
  --cyan:#5B8AA6;
  --cyan-l:#8FB4C9;
  --t1:#EDEAE4;
  --t2:#B8B4AB;
  --t3:#8A8781;
  --border:rgba(139,168,184,.16);
  --border2:rgba(201,124,61,.35);
  --fd:'Newsreader',serif;
  --fb:'Public Sans',sans-serif;
  --fm:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh;background:var(--bg);color:var(--t1);font-family:var(--fb)}
body{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100vh;padding:24px 16px;
}
#chat{
  width:100%;max-width:560px;
  display:flex;flex-direction:column;gap:12px;
  padding-top:24px;
}
.brand{font-family:var(--fm);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan-l);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.brand::before{content:'';width:7px;height:7px;background:var(--copper);display:inline-block;transform:rotate(45deg)}
.bubble{
  background:var(--paper);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;font-size:15px;line-height:1.5;color:var(--t1);
  max-width:88%;animation:fadeIn .25s ease;
}
.bubble.user{
  align-self:flex-end;background:var(--copper);color:#14171A;font-weight:600;border:none;
}
.options{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-end;max-width:100%;justify-content:flex-end}
.opt-btn{
  font-family:var(--fb);font-size:14.5px;font-weight:600;color:var(--t1);
  background:var(--bg2);border:1px solid var(--border2);border-radius:8px;
  padding:11px 16px;cursor:pointer;transition:all .15s;
}
.opt-btn:hover{border-color:var(--copper);color:var(--copper-l);transform:translateY(-1px)}
.input-row{display:flex;gap:8px;align-self:flex-end;width:100%}
.input-row input{
  flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:13px 14px;font-family:var(--fb);font-size:15px;color:var(--t1);outline:none;
}
.input-row input:focus{border-color:var(--copper)}
.input-row button{
  background:var(--copper);color:#14171A;border:none;border-radius:8px;
  padding:0 20px;font-weight:700;cursor:pointer;font-family:var(--fb);
}
.input-row button:hover{background:var(--copper-l)}
.cta-btn{
  align-self:flex-end;background:var(--copper);color:#14171A;border:none;border-radius:8px;
  padding:15px 22px;font-family:var(--fb);font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:0 8px 24px rgba(201,124,61,.25);
}
.cta-btn:hover{background:var(--copper-l);transform:translateY(-1px)}
.typing{align-self:flex-start;color:var(--t3);font-family:var(--fm);font-size:12px;letter-spacing:1px}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}