:root{
  --bg:#EFEAE2;
  --panel:#FFFFFF;
  --ink:#1F2A24;
  --ink-soft:#5C6B62;
  --line:#DDD6C8;
  --accent:#0F6E5C;
  --accent-soft:#E3EFEA;
  --bubble-user:#D9F2E6;
  --bubble-agent:#FFFFFF;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,Segoe UI,Roboto,sans-serif;
}

.app{height:100vh;display:flex;flex-direction:column;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:var(--accent);color:#fff;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:#7FE0BE;}
.brand h1{font-size:1.05rem;margin:0;}
.brand p{font-size:.75rem;margin:0;opacity:.85;}
.actions button{
  background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:6px;padding:7px 12px;font-size:.8rem;cursor:pointer;margin-left:8px;
}
.actions button:hover{background:rgba(255,255,255,.28);}

.layout{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0;}

.chat-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);}
.log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:70%;padding:10px 13px;border-radius:10px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;}
.msg.user{align-self:flex-end;background:var(--bubble-user);border-bottom-right-radius:2px;}
.msg.agent{align-self:flex-start;background:var(--bubble-agent);border:1px solid var(--line);border-bottom-left-radius:2px;}
.msg.pending{opacity:.6;font-style:italic;}
.msg.error{align-self:flex-start;background:#FBE7E1;border:1px solid #E2A98F;color:#7A3010;}

.composer{display:flex;gap:8px;padding:14px 20px;background:var(--panel);border-top:1px solid var(--line);}
.composer input{
  flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:20px;font-size:.92rem;
}
.composer input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.composer button{
  background:var(--accent);color:#fff;border:none;border-radius:20px;padding:10px 18px;
  font-size:.88rem;cursor:pointer;
}
.composer button:hover{opacity:.92;}

.side-panel{padding:18px;overflow-y:auto;background:var(--panel);}
.side-panel h2{font-size:.95rem;margin:0 0 4px;}
.side-panel .hint{font-size:.78rem;color:var(--ink-soft);margin:0 0 16px;}

.card{background:var(--accent-soft);border-radius:10px;padding:14px;margin-bottom:14px;}
.card h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:0 0 10px;}

.fields{margin:0;display:flex;flex-direction:column;gap:6px;}
.fields div{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;}
.fields dt{color:var(--ink-soft);}
.fields dd{margin:0;font-weight:600;text-align:right;}

.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.list li{background:#fff;border-radius:8px;padding:8px 10px;font-size:.82rem;line-height:1.4;}

.empty{color:var(--ink-soft);font-size:.82rem;font-style:italic;}

@media (max-width:760px){
  .layout{grid-template-columns:1fr;}
  .side-panel{border-top:1px solid var(--line);}
}