:root { --navy:#173b60; --ink:#18314c; --muted:#708399; --line:#dce6ef; --paper:#fff; --bg:#f3f7fa; --green:#2d956b; --amber:#d89618; --red:#c85c5c; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
button,input,textarea { font:inherit; }
.wa-topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; padding:12px clamp(20px,4vw,72px); background:var(--navy); color:#fff; }
.wa-brand { display:block; width:148px; height:48px; overflow:hidden; border-radius:7px; background:#fff; }
.wa-brand img { width:100%; height:100%; object-fit:contain; }
.wa-topbar nav { display:flex; align-items:center; gap:22px; font-size:14px; }
.wa-topbar a { color:#dbe7f2; text-decoration:none; }.wa-topbar strong { color:#fff; }
.wa-shell { max-width:1500px; margin:0 auto; padding:34px clamp(16px,3vw,44px); }
.wa-heading p { margin:0 0 5px; color:#708399; letter-spacing:.12em; font-size:12px; font-weight:800; }.wa-heading h1 { margin:0; font-size:30px; }.wa-heading span { display:block; margin-top:8px; color:var(--muted); }
.wa-grid { margin-top:28px; display:grid; grid-template-columns:260px minmax(360px,1fr) 300px; min-height:620px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--paper); box-shadow:0 18px 50px #1d405b12; }
.wa-sidebar,.wa-test-panel { padding:18px; background:#f8fbfd; }.wa-sidebar { border-right:1px solid var(--line); }.wa-test-panel { border-left:1px solid var(--line); }
.wa-sidebar-title { display:flex; justify-content:space-between; align-items:center; }.wa-sidebar h2,.wa-test-panel h2 { margin:0; font-size:16px; }.icon-button { border:0; background:transparent; cursor:pointer; font-size:22px; color:var(--navy); }
.conversation-list { margin-top:14px; display:grid; gap:7px; }.conversation-card { width:100%; border:1px solid var(--line); background:#fff; text-align:left; border-radius:10px; padding:12px; cursor:pointer; color:var(--ink); }.conversation-card:hover,.conversation-card.active { border-color:#5b82a7; background:#edf5fb; }.conversation-card strong,.conversation-card span { display:block; }.conversation-card span { margin-top:4px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.badge { display:inline-block!important; margin-top:8px!important; background:#fde9c2; color:#905f00!important; padding:3px 6px; border-radius:99px; font-weight:700; }.empty { color:var(--muted); font-size:14px; }
.conversation-panel { padding:24px; min-width:0; }.empty-state { min-height:560px; display:grid; place-content:center; gap:7px; text-align:center; color:var(--muted); }.empty-state strong { color:var(--ink); font-size:18px; }.conversation-head { display:flex; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }.conversation-head h2 { margin:0; }.conversation-head p { margin:5px 0 0; color:var(--muted); font-size:14px; }.status { align-self:start; border-radius:99px; padding:6px 10px; background:#e8f0f7; font-size:12px; font-weight:700; }.status.human_handoff { background:#ffe7df; color:#a34a32; }
.messages { display:grid; gap:12px; padding:20px 0; }.message { max-width:82%; border-radius:14px; padding:11px 13px; background:#f2f6f9; }.message.outbound { justify-self:end; background:#dbeee5; }.message span { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.conversation-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--line); }.conversation-actions button,.wa-test-panel button { border:0; background:var(--navy); color:#fff; border-radius:9px; padding:10px 12px; cursor:pointer; font-weight:700; }.conversation-actions button.secondary { background:#edf2f6; color:var(--ink); }
.human-reply { display:flex; gap:8px; margin-top:14px; }.human-reply input { min-width:0; flex:1; border:1px solid var(--line); border-radius:9px; padding:10px; }
.wa-test-panel p { color:var(--muted); font-size:13px; line-height:1.45; }.wa-test-panel form { display:grid; gap:12px; }.wa-test-panel label { display:grid; gap:6px; color:#52677c; font-size:12px; font-weight:700; }.wa-test-panel input,.wa-test-panel textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px; background:#fff; color:var(--ink); }.wa-test-panel textarea { min-height:120px; resize:vertical; }.test-result { margin-top:16px; padding:10px 0; color:#456177; font-size:13px; white-space:pre-wrap; line-height:1.5; }
@media (max-width: 980px) { .wa-grid { grid-template-columns:240px minmax(0,1fr); }.wa-test-panel { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); }.wa-test-panel form { grid-template-columns:180px 1fr auto; align-items:end; }.wa-test-panel label:last-of-type { grid-column:2/3; }.wa-test-panel button { grid-column:3/4; } }
@media (max-width: 700px) { .wa-topbar nav { gap:11px; }.wa-topbar nav a:first-child { display:none; }.wa-shell { padding:20px 12px; }.wa-heading h1 { font-size:24px; }.wa-grid { display:block; border-radius:12px; }.wa-sidebar,.wa-test-panel { border:0; }.wa-sidebar { border-bottom:1px solid var(--line); }.conversation-list { display:flex; overflow:auto; }.conversation-card { min-width:190px; }.conversation-panel { padding:18px; }.empty-state { min-height:240px; }.wa-test-panel form { display:grid; }.wa-test-panel label:last-of-type,.wa-test-panel button { grid-column:auto; }.message { max-width:92%; }.wa-brand { width:112px; }.wa-topbar { padding:10px 14px; } }