:root{--bg:#f4f5f7;--panel:#fff;--line:#e3e5e8;--text:#1d2125;--muted:#6b7280;--in:#fff;--out:#d9fdd3;--accent:#0a7c5a;--warn:#b45309;--err:#b91c1c}*{box-sizing:border-box}body{background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}.shell{grid-template-columns:340px 1fr;height:100vh;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto}.phone{border-bottom:1px solid var(--line);padding:12px 16px;font-size:13px}.badge{background:#eef2f1;border-radius:999px;margin-right:6px;padding:2px 8px;font-size:12px;display:inline-block}.badge.warn{color:var(--warn);background:#fef3c7}.badge.err{color:var(--err);background:#fee2e2}.conv{border-bottom:1px solid var(--line);padding:12px 16px;display:block}.conv.active,.conv:hover{background:#f0f2f5}.conv .name{justify-content:space-between;font-weight:600;display:flex}.conv .preview{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.unread{background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px}.thread{flex-direction:column;height:100vh;display:flex}.thread header{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 16px}.messages{flex-direction:column;flex:1;gap:6px;padding:16px;display:flex;overflow-y:auto}.bubble{background:var(--in);border-radius:8px;max-width:65%;padding:8px 10px;box-shadow:0 1px #0000000f}.bubble.out{background:var(--out);align-self:flex-end}.bubble .meta{color:var(--muted);justify-content:flex-end;gap:6px;margin-top:4px;font-size:11px;display:flex}.bubble img{border-radius:6px;max-width:100%;display:block}.composer{background:var(--panel);border-top:1px solid var(--line);gap:8px;padding:12px 16px;display:flex}.composer textarea{resize:none;border:1px solid var(--line);font:inherit;border-radius:6px;flex:1;padding:8px}button{background:var(--accent);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:6px;padding:8px 14px}button:disabled{opacity:.5;cursor:default}.notice{color:var(--warn);border-top:1px solid var(--line);background:#fffbeb;padding:12px 16px;font-size:14px}.center{place-items:center;height:100vh;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;gap:12px;width:360px;padding:24px;display:grid}.card input{border:1px solid var(--line);font:inherit;border-radius:6px;padding:8px}.error{color:var(--err);font-size:14px}