:root { --border:#e5e7eb; --bg:#f8fafc; --text:#111827; --muted:#6b7280; --in:#e5f6ff; --out:#e8f5e9; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); }
.app { display:flex; height:100vh; }

.left { width:320px; border-right:1px solid var(--border); background:#fff; display:flex; flex-direction:column; }
.left-header { padding:10px 12px; border-bottom:1px solid var(--border); }
.left-header h2 { margin:0 0 8px 0; font-size:16px; }
.search { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }

#contacts { overflow:auto; }
.contact { padding:12px; cursor:pointer; border-bottom:1px solid var(--border); }
.contact:hover { background:#f3f4f6; }
.email { font-weight:600; font-size:14px; }
.preview { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }

.main { flex:1; display:flex; flex-direction:column; }
.topbar { padding:12px 16px; border-bottom:1px solid var(--border); background:#fff; font-weight:600; }
.thread { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.bubble { max-width:70%; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:#fff; white-space:pre-wrap; word-break:break-word; }
.inbound { align-self:flex-start; background:var(--in); }
.outbound { align-self:flex-end; background:var(--out); }
.meta { font-size:12px; color:var(--muted); margin:4px 2px 0; }
.empty { margin:auto; color:var(--muted); }