:root{
  --paper:#F4F2EA;
  --surface:#FFFFFF;
  --ink:#141414;
  --muted:#6B7280;
  --line:#E6E6E8;
  --teal-700:#1E6769; /* brand primary */
  --teal-500:#2F8F94;
  --teal-300:#83B9BB;
  --orange-600:#E97129;
  --orange-400:#F7A455;
  --ok:#159570;
  --danger:#D63B2F;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 10px 32px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-variant-numeric:tabular-nums;
}

/* Header */
.app-header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:#fff}
.brand-name{font-family:"League Spartan", system-ui, -apple-system;letter-spacing:.8px;text-transform:uppercase;font-weight:800}
.nav{display:flex;gap:8px}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:#fff}
.nav-link:hover{background:#f8fafb}
.app{max-width:900px;margin:0 auto;padding:16px}

/* Sections, cards */
.section{display:flex;flex-direction:column;gap:18px}
.section-title{font-family:"League Spartan", system-ui, -apple-system;letter-spacing:.8px;text-transform:uppercase;font-weight:800;font-size:28px;margin:8px 0}
.section-sub{margin-top:-6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 1px 0 rgba(0,0,0,.03);display:flex;flex-direction:column;gap:10px}

/* Buttons */
.primary, .ghost, .pill, .danger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:10px 14px;font-weight:600;border:1px solid var(--line);cursor:pointer;
  background:#fff;color:var(--ink);text-decoration:none;
}
.primary{background:var(--teal-700);color:#fff;border-color:var(--teal-700)}
.primary:hover{filter:brightness(.98)}
.ghost:hover{background:#f3f6f6}
.danger{background:#fff;border-color:#F3C0BC;color:#991B1B}
.danger:hover{background:#FEF2F2}
.pill{border-radius:9999px;background:#EEF7F7;border-color:#CFE8E9;color:#0E4E50}

/* Lists */
.agent-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.agent{
  display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);background:#fff;border-radius:14px;cursor:pointer;
}
.agent:hover{background:#f7fbfb}
.agent .avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);object-fit:cover;background:#fff}
.agent .title{font-weight:700}
.agent .sub{font-size:13px;color:var(--muted)}

/* Chat */
.chat-shell{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:#fbfbfb}
.back-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 8px;cursor:pointer}
.contact{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);object-fit:cover;background:#fff}
.name{font-weight:700}
.status{font-size:12px;color:var(--muted)}
.chat-actions .pill{padding:8px 12px}

.messages{padding:12px;height:55vh;overflow:auto;background:linear-gradient(#F8FAFB,#F4F6F7)}
.bubble{max-width:70%;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.03);margin:6px 0;white-space:pre-wrap}
.row{display:flex}
.row.left{justify-content:flex-start}
.row.right{justify-content:flex-end}
.bubble.agent{background:#EEF7FF;border-color:#D7E8FF}
.meta{font-size:12px;color:var(--muted);margin:2px 4px}

.composer{display:grid;grid-template-columns:1fr auto;grid-template-areas:"input actions";gap:8px;border-top:1px solid var(--line);padding:10px;background:#fff}
.input{grid-area:input;width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:42px;max-height:160px;resize:vertical;font:inherit;line-height:1.4}
.composer-actions{grid-area:actions;display:flex;gap:8px;align-items:end}

/* Orders */
.order-list{display:flex;flex-direction:column;gap:10px}
.order{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px}
.order .meta{display:flex;flex-direction:column;gap:2px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;font-size:12px;font-weight:600;padding:4px 8px}
.badge.ok{background:#E9F7F1;color:#065F46;border:1px solid #A7F3D0}
.badge.pending{background:#FFF7ED;color:#7C2D12;border:1px solid #FED7AA}

/* Utilities */
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:8px}
.hide{display:none}
@media (max-width: 720px){
  .messages{height:calc(100vh - 200px)}
}