:root{--bg-base:#0b0b0b;--bg-surface:#121212;--bg-card:#1a1a1a;--bg-elevated:#242424;--bg-hover:#2a2a2a;--brand-primary:#25d366;--brand-secondary:#128c7e;--brand-accent:#075e54;--text-primary:#e4e6eb;--text-secondary:#b0b3b8;--text-muted:#72767d;--border-default:#2d2d2d;--border-subtle:#222;--bubble-outgoing:#005c4b;--bubble-outgoing-border:#004d3e;--bubble-incoming:#202c33;--bubble-incoming-border:#26353d;--success:#25d366;--error:#ef4444;--warning:#f59e0b;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 6px -1px #0009;--shadow-lg:0 10px 15px -3px #000c;--transition-fast:.15s ease;--transition-normal:.25s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:var(--brand-primary);color:#000}.btn-primary:hover{background:#20bc5a;transform:translateY(-1px)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.avatar{background:var(--bg-elevated);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:14px;font-weight:700;display:flex;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.spinner{border:2px solid #ffffff1a;border-top-color:currentColor;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes messageIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}